Add background video to certain user profiles?

Development
6

Okay, so, for the most part, this approach works great, and the explanation is fantastic. Thank you very much for going above and beyond.

Working on a per-user basis is simple - we just check for a given username like so:

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

However, we do run into an issue with our CSS - we wish to make some changes to how the user page looks for only these users.

At the moment, we’re accomplishing that via the same code as before:

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

This allows us to simply copy and paste the “User1” code for each new user, but relies on a 50ms delay after every page load before firing, which is visible to the end user (and, if removed, doesn’t work for whatever reason).

Is there any way to also hook this addition of a class to the body into the code you provided, so we can use it to style pages with videos differently from those without?