Adicionar vídeo de fundo a certos perfis de usuário?

Dev
6

Ok, então, na maior parte, essa abordagem funciona muito bem, e a explicação é fantástica. Muito obrigado por ir além.

Trabalhar em uma base por usuário é simples - nós apenas verificamos um nome de usuário específico como este:

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

No entanto, encontramos um problema com nosso CSS - desejamos fazer algumas alterações na aparência da página do usuário apenas para esses usuários.

No momento, estamos realizando isso através do mesmo código de 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>

Isso nos permite simplesmente copiar e colar o código “User1” para cada novo usuário, mas depende de um atraso de 50ms após cada carregamento de página antes de disparar, o que é visível para o usuário final (e, se removido, não funciona por algum motivo).

Existe alguma maneira de também conectar essa adição de uma classe ao corpo ao código que você forneceu, para que possamos usá-lo para estilizar páginas com vídeos de forma diferente daquelas sem vídeos?