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

Dev
6

D’accord, dans l’ensemble, cette approche fonctionne très bien, et l’explication est fantastique. Merci beaucoup d’avoir fait plus que ce qui était attendu.

Travailler sur une base par utilisateur est simple : il suffit de vérifier un nom d’utilisateur donné comme ceci :

      const isUser1 = args.model.username == "User1"
      component.setProperties({isUser1})

Cependant, nous rencontrons un problème avec notre CSS : nous souhaitons apporter des modifications à l’apparence de la page utilisateur pour uniquement ces utilisateurs.

Pour le moment, nous y parvenons via le même code qu’auparavant :

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() =>{
        window.onload = determineUser();
    });
    
    async function determineUser() {
        await sleep(50);
        var pageURL = document.querySelector("meta[property='og:url']").getAttribute("content");
        var isUserPage = pageURL.includes("https://www.siteurl.com/u/");
        var isUser1 = pageURL.includes("u/User1/");
        document.body.className = document.body.className.replace(" user-page-animated","");

        
        if(isUserPage)
        {
            if(isUser1)
            {
                document.body.className += ' user-page-animated';
            }
        }
    }
    
    function sleep(ms)
    {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
</script>

Cela nous permet de simplement copier-coller le code “User1” pour chaque nouvel utilisateur, mais repose sur un délai de 50 ms après chaque chargement de page avant de se déclencher, ce qui est visible par l’utilisateur final (et, si supprimé, ne fonctionne pas pour une raison quelconque).

Existe-t-il un moyen d’intégrer également cet ajout d’une classe au corps dans le code que vous avez fourni, afin que nous puissions l’utiliser pour styliser différemment les pages avec des vidéos de celles qui n’en ont pas ?