¿Añadir video de fondo a ciertos perfiles de usuario?

Desarrollador
6

De acuerdo, en su mayor parte, este enfoque funciona muy bien, y la explicación es fantástica. Muchas gracias por ir más allá.

Trabajar a nivel de usuario es sencillo: simplemente comprobamos un nombre de usuario determinado, así:

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

Sin embargo, nos encontramos con un problema con nuestro CSS: deseamos realizar algunos cambios en la apariencia de la página de usuario solo para estos usuarios.

En este momento, lo estamos logrando a través del mismo código que antes:

<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>

Esto nos permite simplemente copiar y pegar el código de “User1” para cada nuevo usuario, pero depende de un retraso de 50 ms después de cada carga de página antes de activarse, lo que es visible para el usuario final (y, si se elimina, no funciona por alguna razón).

¿Hay alguna manera de vincular también esta adición de una clase al cuerpo al código que proporcionaste, para que podamos usarla para estilizar páginas con videos de manera diferente a las que no los tienen?