Aggiungere video di sfondo a determinati profili utente?

Sviluppatore
6

Ok, per la maggior parte, questo approccio funziona benissimo e la spiegazione è fantastica. Grazie mille per esserti spinto oltre.

Lavorare su base per utente è semplice: controlliamo semplicemente un dato nome utente come questo:

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

Tuttavia, incontriamo un problema con il nostro CSS: desideriamo apportare alcune modifiche all’aspetto della pagina utente solo per questi utenti.

Al momento, lo stiamo realizzando tramite lo stesso codice di prima:

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

Questo ci permette di copiare e incollare semplicemente il codice “User1” per ogni nuovo utente, ma si basa su un ritardo di 50 ms dopo ogni caricamento della pagina prima di attivarsi, il che è visibile all’utente finale (e, se rimosso, non funziona per qualche motivo).

C’è un modo per agganciare anche questa aggiunta di una classe al body al codice che hai fornito, in modo da poterla utilizzare per stilizzare le pagine con video in modo diverso da quelle senza?