Bonjour !
 
Je cherche à améliorer Deezer sur mon navigateur (Vivaldi)
 
J'y arrive en partie, je duplique la pochette car quand on scrolle dans l'album la pochette disparait de l'affichage alors qu'il reste justement de la place pour la mettre à gauche.
 
Problème : si je clique sur un autre album en dessous de l'album en lecture en cours, la page ne se recharge pas complètement, que la grande partie de droite, et la pochette à gauche ne se met pas à jour.
 
Savez vous comment je peux faire ?  Détecter quand la partie de droite se recharge ??
 
Merci d'avance
 

 
 
 
Mon code
 

setTimeout(() => {  
  
let pochette = document.querySelector("#page_naboo_album > div:nth-child(1) > div > div._5BJsj > div > div._2Rv6Z._2j25R" );
  
let clone = pochette.cloneNode(true);
 
clone.style.marginLeft = "10px";
 
let barreGauche = document.querySelector("#page_sidebar > div.sidebar-nav.nano.has-scrollbar > div.nano-content > div" );
 
barreGauche.appendChild(clone);
 
}, 2000);

Avec MutationObserver ?
https://developer.mozilla.org/fr/do [...] onObserver

Merci, je vais regarder de ce coté

Je progresse, merci, je détecte bien le rechargement de la partie de droite (mais j'arrive pas à cibler un div dedans, c'est soit toute la grosse partie de droite soit rien).
 
Cependant je ne sais pas pourquoi je n'arrive pas à mettre à jour le DIV que j'ai ajouté (contenant la pochette)
 
Si je fais ça ça marche à moitié car ça ajoute bien en dessous la pochette du nouvel album chargé (mais je n'arrive pas a supprimer la précédente)
 

function callback() {
  
  console.log('callback passe : changement détecté');
 
  setTimeout(() => {
  
    //barreGauche.removeChild(clone);  // ces 2 lignes marchent pas
    //clone.remove();
    
    let pochette2 = document.querySelector("#page_naboo_album > div:nth-child(1) > div > div._5BJsj > div > div._2Rv6Z._2j25R" );
 
    let clone2 = pochette2.cloneNode(true);
 
    let barreGauche2 = document.querySelector("#page_sidebar > div.sidebar-nav.nano.has-scrollbar > div.nano-content > div" );
    barreGauche2.appendChild(clone2);
 
  }, 4000);
  
}

 
 
Et ceci ne fonctionne pas, ça ne "se met pas à jour" :
 

function callback() {
  
  console.log('callback passe : changement détecté');
 
  setTimeout(() => {
    
    pochette = document.querySelector("#page_naboo_album > div:nth-child(1) > div > div._5BJsj > div > div._2Rv6Z._2j25R" );
 
    clone = pochette.cloneNode(true);
 
  }, 4000);
  
}

 
Savez vous ce que je peux tenter ?  Edit : J'ai pas d'erreur dans la console
 
 
Screen quand ça ajoute le nouvel album chargé : (1er code de ce post)
 

Ca marche !  J'ai foutu mes var en dehors de toutes {}.  J'en ai chié un bon moment.
 

function callback() {
  
  console.log('callback passe : changement détecté');
 
  setTimeout(() => {
  
    barreGauche.removeChild(clone);
    
    pochette = document.querySelector("#page_naboo_album > div:nth-child(1) > div > div._5BJsj > div > div._2Rv6Z._2j25R" );
 
    clone = pochette.cloneNode(true);
    clone.style.marginLeft = "10px";
 
    barreGauche.appendChild(clone);
 
  }, 2000);
  
}

 
Et la partie qui concerne la détection de changement :
 

let elementToObserve = document.querySelector("#page_content" );  //#page_content
 
let observer = new MutationObserver(callback);
 
let options = {
  childList: true, 
};
 
observer.observe(elementToObserve, options);

Salut !
 
Je cherche à présent à mettre en valeur la barre de progression dans le morceau de musique en cours.
 
L'aspect quand elle est "hover" me convient très bien, il existe un moyen de forcer ça ?  Car quand elle n'est pas en hover je vois strictement rien !
 
Merci encore une fois !
 
Edit : ah je m'apercois que sa class c'est "slider-autohide", donc c'est l'inverse qui doit se passer, non ?
 

J'y suis arrivé !  (je chopais pas le bon élément)