Sprint 5

Week 2

Dinsdag 10 december 2024

Workshop view-transition

• cross document
• same document

@view-transition {
   navigation: auto; 
}

Player herontwerp en extra JavaScript functionaliteiten

Zie issue

Ik heb een aantal nieuwe schetsen gemaakt, met daarin het herontwerp van de player en nieuwe states

Commit: 5d8759e

• Loading animatie toegevoegd in CSS
• In JS wordt deze met een addEventListener("click") aangeroepen
• Wanneer animatie eindigt, wordt deze class uit getoggled en nummer gestart met playTrack()
• Object buttonLabelStates toegevoegd met "Speel af, Laden en Pauzeer". Deze wordt op in de juiste functies gebruikt om de tekst onder play button aan te passen, bijvoorbeeld bij loadTrack():

function loadingTrack() {
    if (isPlaying === false) { // als er niks afspeelt, start loading animatie
        buttonImage.classList.toggle("loadingTrack");
        buttonLabel.textContent = buttonLabelStates.loading;
    } else { // als er wel wat afspeelt, pauzeer nummer en verander afbeelding en button label state
        isPlaying = false;
        currentTrack.pause();
        buttonImage.classList.remove("pause-track");
        buttonImage.classList.add("play-track");
        buttonLabel.textContent = buttonLabelStates.start; 
    }
}

https://github.com/user-attachments/assets/d1cd7845-be3f-4940-81d8-247ea39c9116