Ajouter une vidéo de fond à certains profils utilisateur ?

Dev
2

Notre approche actuelle consiste à voir si nous pouvons simplement détecter que nous sommes sur la page d’un certain utilisateur via le lien canonique, et si c’est le cas, à appliquer la vidéo. À ce titre, nous avons ce qui suit :

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        determineUser();
    });
    
    function determineUser() {
        var pageURL = document.querySelector("link[rel='canonical']").getAttribute("href");
        var isUserPage = pageURL.includes("https://www.fortressoflies.com/u/");
        document.documentElement.style.setProperty('--currUsername', pageURL);
        if(isUserPage)
        {
            document.documentElement.style.setProperty('--lastUsername', pageURL);
            $('body').css('background-color', '#'+(Math.random()*0xFFFFFF<<0).toString(16));
        }
    }
</script>

Cependant, cela ne semble fonctionner que lors d’un rafraîchissement complet - pour une raison quelconque, cliquer d’une page à l’autre ne met pas à jour la propriété --currUsername, et au lieu d’appliquer un arrière-plan de couleur aléatoire aux pages utilisateur, il applique un arrière-plan de couleur aléatoire à toutes les pages si F5 a été frappé en dernier sur une page utilisateur, tout en n’appliquant rien à aucune page si F5 a été frappé en dernier sur une page non utilisateur.

Je ne suis franchement pas assez expérimenté en JavaScript pour savoir pourquoi cela se produirait - il me semble que, lors d’un changement de page, la fonction devrait se déclencher (ce qu’elle fait), provoquant la mise à jour de la variable pageURL, et cela devrait provoquer la mise à jour de la propriété --currUsername lors du chargement d’une page. Cependant, cela ne se produit que lors d’un rafraîchissement complet, sinon les variables ne semblent pas changer.

Avez-vous une idée de ce que je fais de mal ?