Commit f17f1ea9 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

suite update Player

parent 96ebb827
......@@ -185,6 +185,7 @@ def playIpa(request):
lang = colis['lang']
voix = colis['voix']
print(ipa, lang, voix)
record = SynthVocRecord.objects.filter(ipa=ipa).filter(lang=lang).filter(voix=voix)
if len(record)>0:
print("Un enregistrement existe déjà dans la base de données. Envoi de cet enregistrement.")
......@@ -196,7 +197,7 @@ def playIpa(request):
if lang == "fr":
loc = "Celine" if voix == "f" else "Mathieu"
elif lang == "enbr":
elif lang == "en":
loc = "Amy" if voix == "f" else "Brian"
print("Lecture de ["+ipa+"] débit 80%")
......
......@@ -81,6 +81,20 @@ function openModalAddMot() {
myModal.show();
}
function openModalAddPron(motId) {
// ouvre une petite fenêtre pour entrer une prononciation à ajouter au mot i passé en argument
document.getElementById('popAddPronId').innerHTML = motId;
var myModal = new bootstrap.Modal(document.getElementById('popAddPron'));
myModal.show();
}
function addPron(motId,trans=[]) {
var jphono = document.getElementById(motId).children.length;
console.log(motId, jphono, trans);
addPhono(motId, jphono, trans);
}
function toList(s) {
// Fait une liste de liste à partir d'une string du type : "phon_d, phon_r_maj, phon_o, phon_m\nphon_d, phon_r_maj, phon_o_maj, phon_m"
s = s.replace(/\s+/g,'') // suppr espaces
......@@ -126,10 +140,17 @@ function addMot(mot,trans=[],i) {
divMotInfo.classList = "d-flex flex-column";
divMot.appendChild(divMotInfo);
var divMotPhono = document.createElement('div');
divMotPhono.id = 'divMotPhono-' + i;
divMotPhono.classList = 'd-flex flex-row mt-2 divMotPhono';
divMot.appendChild(divMotPhono);
var divMotPhonoPlus = document.createElement('div');
divMotPhonoPlus.id = 'divMotPhonoPlus-' + i;
divMotPhonoPlus.classList = 'd-flex flex-column mt-2 align-items-center';
divMot.appendChild(divMotPhonoPlus);
var divMotPhono = document.createElement('div');
divMotPhono.id = 'divMotPhono-' + i;
divMotPhono.classList = 'd-flex flex-row divMotPhono';
divMotPhonoPlus.appendChild(divMotPhono);
var divMotInfoFin = document.createElement('div');
divMotInfoFin.classList = "d-flex flex-column";
......@@ -151,17 +172,6 @@ function addMot(mot,trans=[],i) {
linkMedia(i,'audioDeb',listeMots[listeMotsGen.indexOf(mot)].audioDeb);
}
// // IMAGE DÉBUT
// var divMotIm = document.createElement('div');
// divMotIm.id = 'divMotIm-' + i;
// divMotIm.classList = 'p-2 align-self-stretch divMotCellMedia divMotCellImageDeb';
// // divMotIm.innerHTML = `<button onclick="uploadImage('`+i+`b')" type="button" class="btn btn-outline-primary js-upload-photos"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-image" viewBox="0 0 16 16"> <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/> <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54A.505.505 0 0 1 1 12.5v-9a.5.5 0 0 1 .5-.5h13z"/></svg></button>`;
// divMotIm.innerHTML = `<button onclick="openFileList('images', ${i})" type="button" class="btn btn-outline-primary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-image" viewBox="0 0 16 16"> <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/> <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54A.505.505 0 0 1 1 12.5v-9a.5.5 0 0 1 .5-.5h13z"/></svg></button>`;
// var myfile="";
// if (listeMotsGen.includes(mot)) myfile = listeMots[listeMotsGen.indexOf(mot)].image.src;
// divMotIm.innerHTML += '<div class="mediaLink" id="fileuploaded-'+i+'b" onclick="play(this,\'image\')">' + myfile + '</div>';
// divMotInfo.appendChild(divMotIm);
// VIDÉO DÉBUT
var divMotVideo = document.createElement('div');
divMotVideo.id = 'divMotVideoDeb-' + i;
......@@ -176,16 +186,6 @@ function addMot(mot,trans=[],i) {
linkMedia(i,'videoDeb',listeMots[listeMotsGen.indexOf(mot)].videoDeb);
}
// // GRAPHIE DÉBUT
// var divMotGraphie = document.createElement('div');
// divMotGraphie.id = 'divMotGraphie-' + i;
// divMotGraphie.classList = 'p-2 align-self-stretch divMotCellMedia divMotCellGraphieDeb';
// divMotGraphie.innerHTML = `<button onclick="openFileList('video', ${i})" type="button" class="btn btn-outline-primary js-upload-photos"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fonts" viewBox="0 0 16 16"> <path d="M12.258 3h-8.51l-.083 2.46h.479c.26-1.544.758-1.783 2.693-1.845l.424-.013v7.827c0 .663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062 2.434.301 2.693 1.846h.479L12.258 3z"/> </svg></button>`;
// var myfile="";
// // if (listeMotsGen.includes(mot)) myfile = listeMots[listeMotsGen.indexOf(mot)].videoDeb.src;
// divMotGraphie.innerHTML += '<div class="mediaLink" id="fileuploaded-'+i+'d" onclick="play(this,\'video\')">' + myfile + '</div>';
// divMotInfo.appendChild(divMotGraphie);
/////////////////////////////// FIN
// IMAGE FIN
var divMotImageFin = document.createElement('div');
......@@ -238,9 +238,9 @@ function addMot(mot,trans=[],i) {
if (listeMotsGen.includes(mot)) {
makePhonoliste(mot, [listeMots[listeMotsGen.indexOf(mot)].phono], divMotPhono.id);
makePhonoliste([listeMots[listeMotsGen.indexOf(mot)].phono], divMotPhono.id);
} else if (trans.length>0) {
makePhonoliste(mot, trans, divMotPhono.id);
makePhonoliste(trans, divMotPhono.id);
} else {
getPhono(mot, divMotPhono.id);
}
......@@ -438,67 +438,75 @@ async function getPhono(mot, targetDiv) {
const data = await response.json();
console.log(data);
makePhonoliste(mot, data.outText, targetDiv);
makePhonoliste(data.outText, targetDiv);
}
function makePhonoliste(mot, data, targetDiv){
console.log(data);
function makePhonoliste(data, targetDiv){
console.log("MakePhonoliste",data);
for(imot=0; imot < data.length; imot++){
// pour chaque mot, on crée une divMotPhonoTable
// pour chaque mot, on crée une divMotPhonoPlus qui contient une divMotPhonoTable (avec les prononciations possibles) et un bouton PLUS
var divMotPhonoPlus = document.createElement('div');
divMotPhonoPlus.classList = 'd-flex flex-column align-items-center';
document.getElementById(targetDiv).appendChild(divMotPhonoPlus);
var divMotPhonoTable = document.createElement('div');
divMotPhonoTable.id = targetDiv + '-' + imot;
divMotPhonoTable.classList = 'd-flex flex-column ';
document.getElementById(targetDiv).appendChild(divMotPhonoTable);
divMotPhonoTable.classList = 'd-flex flex-column';
divMotPhonoPlus.appendChild(divMotPhonoTable);
var btnPhonoPlus = document.createElement('div');
btnPhonoPlus.innerHTML = `<button type="button" class="btn" style="border-radius:50%" title="Ajouter une prononciation possible" onclick="openModalAddPron('${divMotPhonoTable.id}')">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</button>`
divMotPhonoPlus.appendChild(btnPhonoPlus);
for(jphono=0; jphono < data[imot].length; jphono++){
if (data[imot][jphono][0] != 'phon_echec' && data[imot][jphono][0] != 'phon_neutre'){
var phono_i = document.createElement('div');
phono_i.classList = "px-4 d-flex align-items-center";
phono_i.id = targetDiv + '-' + imot + '-' + jphono;
var phono_i_check = document.createElement('div');
phono_i_check.classList = "d-flex align-items-center";
var checkedOrNot = "checked"; // par défaut checked, sauf si Série existe + ce mot n'a pas cette phono
// if (listeMotsGen.includes(mot)) {
// var myArr1 = listeMots[listeMotsGen.indexOf(mot)].phono.join('');
// console.log(myArr1, myArr2)
// var myArr2 = data[imot][jphono].join("");
// if (myArr1!=myArr2) {
// checkedOrNot = "";
// }
// }
phono_i_check.innerHTML = '<input id="check-'+ targetDiv + '-' + imot + '-' + jphono +'" type="checkbox" class="form-check-input" '+ checkedOrNot +'>';
phono_i.appendChild(phono_i_check);
var phono_i_phono = document.createElement('div');
phono_i_phono.id = targetDiv + '-' + imot + '-' + jphono + '-phons';
phono_i_phono.classList = "d-flex m-2";
phono_i.appendChild(phono_i_phono);
var phono_i_phonoText = document.createElement('div');
phono_i_phonoText.id = targetDiv + '-' + imot + '-' + jphono + '-phonsText';
phono_i_phonoText.style.display = 'none';
phono_i.appendChild(phono_i_phonoText);
divMotPhonoTable.appendChild(phono_i);
var phono_i_phonoTextList = [];
for(kphon=0; kphon < data[imot][jphono].length; kphon++){
if (data[imot][jphono][kphon] != 'phon_echec' && data[imot][jphono][kphon] != 'phon_neutre'){
appendPhonCard(data[imot][jphono][kphon], phono_i_phono);
phono_i_phonoTextList.push(data[imot][jphono][kphon]);
}
};
phono_i_phonoText.innerHTML = phono_i_phonoTextList.join(',');
addPhono(divMotPhonoTable.id, jphono, data[imot][jphono]);
}
}
}
}
function addPhono(divMotPhonoTableId, jphono, phono) {
console.log("AddPhono()",phono)
var phono_i = document.createElement('div');
phono_i.classList = "px-4 d-flex align-items-center";
phono_i.id = divMotPhonoTableId + '-' + jphono;
var phono_i_check = document.createElement('div');
phono_i_check.classList = "d-flex align-items-center";
var checkedOrNot = "checked";
phono_i_check.innerHTML = '<input id="check-'+ divMotPhonoTableId + '-' + jphono +'" type="checkbox" class="form-check-input" '+ checkedOrNot +'>';
phono_i.appendChild(phono_i_check);
var phono_i_phono = document.createElement('div');
phono_i_phono.id = divMotPhonoTableId + '-' + jphono + '-phons';
phono_i_phono.classList = "d-flex m-2";
phono_i.appendChild(phono_i_phono);
var phono_i_phonoText = document.createElement('div');
phono_i_phonoText.id = divMotPhonoTableId + '-' + jphono + '-phonsText';
phono_i_phonoText.style.display = 'none';
phono_i.appendChild(phono_i_phonoText);
document.getElementById(divMotPhonoTableId).appendChild(phono_i);
var phono_i_phonoTextList = [];
for(kphon=0; kphon < phono.length; kphon++){
if (phono[kphon] != 'phon_echec' && phono[kphon] != 'phon_neutre'){
appendPhonCard(phono[kphon], phono_i_phono);
phono_i_phonoTextList.push(phono[kphon]);
}
};
phono_i_phonoText.innerHTML = phono_i_phonoTextList.join(',');
}
function appendPhonCard(phonId, targetDiv) {
var newCarteDiv = document.createElement('div');
......@@ -616,7 +624,7 @@ function makeSerieMots(){
entreeTable.push([]); // création d'un nouveau submot
var liste_phono = liste_submots[j].children;
var liste_phono = liste_submots[j].children[0].children;
// POUR CHAQUE PHONO DE CE MOT
for(k=0; k<liste_phono.length; k++){
......@@ -624,7 +632,7 @@ function makeSerieMots(){
// SI CETTE PHONO EST SELECTIONNÉE (checked)
if(liste_phono[k].firstChild.firstChild.checked){
var phonsText = liste_phono[k].children[2].innerText.split(',');
entreeTable[entreeTable.length-1].push(phonsText);
entreeTable[entreeTable.length-1].push(phonsText);
}
}
......
......@@ -134,9 +134,9 @@ var phon2api = {
"phon_z_maj":"ʒ",
"phon_z_retr":"ʐ",
"phon_z_slash":"ʑ",
"phon_schwi":"pour l'anglais i/ɪ",
"phon_schwa":"pour l'anglais ə",
"phon_schwu":"pour l'anglais u/ʊ",
"phon_schwi":"ɪ",
"phon_schwa":"ə",
"phon_schwu":"ʊ",
"phon_a_majr":"ɑɹ",
"phon_ai_maj":"",
"phon_ai_majarobase":"aɪə",
......
......@@ -415,8 +415,11 @@ function getBravo(mot) {
document.getElementById("bravo_text").innerHTML += "<span class='graphContours "+ phonographie[i][0] +"'>"+ phonographie[i][1] +"</span>"
}
} else {
// document.getElementById("bravo_text").innerHTML = "Bravo !"
document.getElementById("bravo_text").innerHTML = mot["graphieFin"]
if("graphieFin" in mot) {
document.getElementById("bravo_text").innerHTML = mot["graphieFin"]
} else {
document.getElementById("bravo_text").innerHTML = "Bravo !"
}
}
bravoDiv.style.display = "block"
......
var currentIpa = "";
var currentLang = "";
var currentDebit = 80;
var voix = "f"
var lang = thisPageLang
async function playIpa(line="") {
var synth = false
if (thisAppli == "phonographe") {
if (thisPageLang == 'fr'){
if (thisPageLang == 'fr' || thisPageLang == 'en'){
// Si quelque chose est écrit...
var phonEllist = document.getElementsByClassName('text')
......@@ -17,6 +17,14 @@ async function playIpa(line="") {
var ipa = "";
for (e=0; e<phonEllist.length; e++){
// on parse les classe c de l'élement e
for (c=0; c<phonEllist[e].classList.length; c++){
if (phonEllist[e].classList[c].match(/stress1/)){
ipa+= 'ˈ'
} else if (phonEllist[e].classList[c].match(/stress2/)){
ipa+= 'ˌ'
}
}
for (c=0; c<phonEllist[e].classList.length; c++){
// si la classe match "phon_.*"" alors on récupère l'équivalent api
if (phonEllist[e].classList[c].match(/phon_.*/)){
......@@ -28,9 +36,9 @@ async function playIpa(line="") {
}
}
ipa = ipa.trim(); // suppression des espaces en début ou en fin
if (ipa != currentIpa) { synth = true }
if (ipa != currentIpa || currentLang != thisPageLang) { synth = true }
}
} else window.alert("Cette fonctionnalité n'est pas encore disponible pour l'anglais !");
} else window.alert("Cette fonctionnalité n'est pas encore disponible pour cette langue !");
} else if (thisAppli == "phonoplayer"){
......@@ -44,6 +52,7 @@ async function playIpa(line="") {
}
if (synth) {
currentLang = thisPageLang;
console.log(`Lecture de [${ipa}]`);
currentIpa = ipa;
// ON EMBALLE TOUT ÇA
......
/* CSS ALeM-APP v4 */
/* https://alem.hypotheses.org/ */
/* Last update: 2021/10/13 */
/* Last update: 2022/07/12 */
:root {
--bicolor1: #ff0000;
......@@ -37,6 +37,7 @@
--phon_b: #156b5e;
--phon_b_emph: #105248; /*bˤ*/
--phon_b_maj: #f87407; /*β*/
--phon_c_maj: #073545; /*ç*/
--phon_d: #0c843d;
--phon_d_emph: #0b6d34; /*dˤ*/
--phon_d_maj: #d65c81; /*ð*/
......@@ -69,7 +70,7 @@
--phon_p: #90312f;
--phon_p_slash: #e8ea2d; /*ɸ p\*/
--phon_p_h: #00cccc; /*pʰ*/
--phon_q: #fe8421;
--phon_q: #d30000;
--phon_q_maj: #e2a77c; /*ɒ*/
--phon_r: #3feed1;
--phon_r_emph: #35ccb3; /*rˤ*/
......@@ -148,6 +149,7 @@
.phon_b { fill: var(--phon_b); color:var(--phon_b); stop-color:var(--phon_b); background:-webkit-linear-gradient(var(--phon_b), var(--phon_b));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
.phon_b_emph { fill: var(--phon_b_emph); color:var(--phon_b_emph); stop-color:var(--phon_b_emph); background:-webkit-linear-gradient(var(--phon_b_emph), var(--phon_b_emph));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
.phon_b_maj { fill: var(--phon_b_maj); color:var(--phon_b_maj); stop-color:var(--phon_b_maj); background:-webkit-linear-gradient(var(--phon_b_maj), var(--phon_b_maj));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; } /*β*/
.phon_c_maj { fill: var(--phon_c_maj); color:var(--phon_c_maj); stop-color:var(--phon_c_maj); background:-webkit-linear-gradient(var(--phon_c_maj), var(--phon_c_maj));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; } /*ç*/
.phon_d { fill: var(--phon_d); color:var(--phon_d); stop-color:var(--phon_d); background:-webkit-linear-gradient(var(--phon_d), var(--phon_d));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
.phon_d_emph { fill: var(--phon_d_emph); color:var(--phon_d_emph); stop-color:var(--phon_d_emph); background:-webkit-linear-gradient(var(--phon_d_emph), var(--phon_d_emph));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; }
.phon_d_maj { fill: var(--phon_d_maj); color:var(--phon_d_maj); stop-color:var(--phon_d_maj); background:-webkit-linear-gradient(var(--phon_d_maj), var(--phon_d_maj));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent; } /*ð*/
......
......@@ -243,12 +243,31 @@ phon_d, phon_r_maj, phon_o_maj, phon_m"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="popAddwClose" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal qui apparaît pour ajouter une prononciation -->
<div class="modal fade" id="popAddPron" tabindex="-1" aria-labelledby="exampleModalLabelPron" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelPron">Ajouter une prononciation possible<span id="popAddPronId" style="display:none"></span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Entrez la prononciation à ajouter :
<textarea id="popAddPronTrans" rows="3" cols="30" placeholder="phon_r_maj, phon_o_maj, phon_z"></textarea>
<button type="button" class="btn btn-success" onclick="addPron(document.getElementById('popAddPronId').innerHTML, toList(document.getElementById('popAddPronTrans').value)[0]);document.getElementById('popAddPronClose').click();">Ajouter</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="popAddPronClose" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Filelist Modal -->
<div class="modal fade" id="fileListModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment