Hintergrundvideo zu bestimmten Benutzerprofilen hinzufügen?

Entwickler
6

Okay, im Grunde funktioniert dieser Ansatz hervorragend und die Erklärung ist fantastisch. Vielen Dank, dass Sie sich so viel Mühe gegeben haben.

Die Arbeit auf Benutzerbasis ist einfach – wir prüfen einfach auf einen bestimmten Benutzernamen, wie hier:

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

Allerdings stoßen wir auf ein Problem mit unserem CSS – wir möchten einige Änderungen daran vornehmen, wie die Benutzerseite nur für diese Benutzer aussieht.

Derzeit erreichen wir dies über denselben Code wie zuvor:

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

Dies ermöglicht es uns, den “User1”-Code einfach für jeden neuen Benutzer zu kopieren und einzufügen, basiert jedoch auf einer Verzögerung von 50 ms nach jedem Seitenaufruf, bevor er ausgelöst wird, was für den Endbenutzer sichtbar ist (und wenn er entfernt wird, aus irgendeinem Grund nicht funktioniert).

Gibt es eine Möglichkeit, diese Hinzufügung einer Klasse zum Body auch in den von Ihnen bereitgestellten Code einzuhaken, damit wir sie verwenden können, um Seiten mit Videos anders zu gestalten als solche ohne?