Release candidate media player

[OniWithTheHoodie]

What is in this pull request ?

The media player can play and pause music changed the media player from it beeing loaded with javascript through the html to better the perfomance.

MediaMobileHuisMediaPlayerAudioAPI.gif.mp4

MediaHuisMediaPlayerAudioAPI.gif.mp4

Explanation

In this pull request is the component MediaPlayer.svelte

• let audioElement is refers to the audio which allows met stop and play the music
• let isPlaying = false; i a Boolean which allows me to check if the music is not playing
• function that allows me to play the audio with an if statment which i pass the audioElement through and then passing the the .play on the audioElement to play the music and isPlaying = true checks if the music is currently playing which allows me to change the apprearance of the svg to play and stop svg when false.
• function stopAudio is where the audio gets put on hold/pause in which the .play() and .pause are js method when paused the isPlaying = false changes the svg to a pause svg if the boolen is faulse.
• Function that get initiated when component is mounted in which a function is passed through within it is an event listener that checks if the music has ended

<script>
  import { onMount } from "svelte";
  // referentie naar de audio element om muziek te kunnen afspelen of stoppen
  let audioElement;
  // Variable om bij te houden of de audio file wordt afgespeeld
  let isPlaying = false;
  // Functie om de audio te aftespelen
  // heeft een boolean van true dat de audio wordt afgespeeld
  function playAudio() {
    if (audioElement) {
      audioElement.play();
      isPlaying = true;
    }
  }
  // Functie om de audio te stoppen
  // heeft een boolean van false dat de audio wordt gestopt
  function stopAudio() {
    if (audioElement) {
      audioElement.pause();
      isPlaying = false;
    }
  }
  // Functie die wordt uitgevoerd wanneede component wordt gemount
  onMount(() => {
    // voeg een event listener toe aan de audio element om te kijken of de audio is afgelopen
    if (audioElement) {
      audioElement.addEventListener("ended", () => {
        isPlaying = false;
      });
    }
  });
</script>

-Here i binded audioElement variable that allows me to stop and play the music to the audio syntax/element with the pathing to the song that gets loaded through the html

• I wrote an if statement in which isPlaying allows me to check if the music is playing or not. The buttons have a onclick of stopAudio and pause audio of which the functions are beeing passed through the buttons then i can use to play and stop the music.

          <!-- Audio element to play the music in which i have binded the audio element for it to work-->
          <audio
            bind:this={audioElement}
            src="/muziek/Amy Winehouse - Back To Black.mp3"
          >
          </audio>

          <!-- de if statement om te kijken of de audio wordt afgespeeld -->
          {#if isPlaying}
            <li>
              <!-- de pause button word weergeven en gebruikt als de play button actief word en met prevent default wordt er voor gezorgt dat de gebruiker niet naar een andere pagina wordt toegeleid -->
              <button
                aria-label="stop button"
                class="audio__playstop--hidden-button"
                on:click={stopAudio}
              >
                <img
                  width="93"
                  class="audio__group-pause"
                  alt=""
                  src="/stop-button.svg"
                />
              </button>
            </li>
            <!-- anders wordt de play button weergegeven -->
          {:else}
            <li>
              <!-- de play button word weergeven en gebruikt als de pause button actief word en met prevent default wordt er voor gezorgt dat de gebruiker niet naar een andere pagina wordt toegeleid -->
              <button
                aria-label="play button"
                class="audio__playstop--hidden-button"
                on:click={playAudio}
              >
                <img
                  width="93"
                  class="audio__group-play"
                  alt=""
                  src="/play-button.svg"
                />
              </button>
            </li>
            <!-- de if statement sluit -->
          {/if}

In this pull request, the media player is included and is named MediaPlayer.svelte.

• The media player contains links that are tabbable.
• Button controls are created with SVG.
• Images are of the SVG type.
• The media player has a combination design of Flexbox and Grid for desktop.
• The media player uses a Flexbox design for mobile.

This pull request is linked to the specified item on the project board.: [https://github.com/Daan645/lose-your-head-the-client-case/issues/30 .](https://github.com/orgs/fdnd-agency/projects/34/views/1?pane=issue&itemId=94086487&issue=fdnd-agency%7Ctriple%7C10)

This task contains the main task/issue #10 Media Player V2.0 with the following sub-issues:

Build

• (Mediaplayer style update - anchor tags & aria-labels (Mediaplayer V4.0) #11)
• (Mediaplayer style update - Indentations & css nesting (Mediaplayer V4.0) #12)
• (Mediaplayer style update - PE mediaplayer (Mediaplayer V4.0) #13)

Test

• (Mediaplayer style update - Test (Mediaplayer V4.0) #14)

integrate

• (Mediaplayer style update - Merge (Mediaplayer V4.0) #15)

Which tests did I perform?

• I reviewed our entire Definition of Done (DoD) and also tested the functionality.
• I checked if the code complies with the BEM methodology.
• Ran the code through the HTML validator.
• Tested using the keyboard.

Code

• Your code adheres to the agreed conventions
• You are consistent in using tabs and line breaks
• You structure your code with comments
• You explain complex code with comments

Design

• The completed component matches the design.

Responsiveness

• It is responsive on all screens down to at least 300px wide.

Accessibility

• Can be operated with a keyboard
• Has a clear focus state
• Uses semantic HTML (divs are only used when necessary for styling)
• All buttons and other clickable elements have cursor: pointer applied
• Scores at least 85% on Lighthouse for both mobile and desktop accessibility
• Images, buttons, and links have alt tags that clearly and concisely describe their function
• HTML passes the HTML validator
• Tested on multiple browsers, at least Firefox and Chrome

Performance

• All images have a standard height and width defined in the HTML
• The format of each image is WebP or SVG
• You have no unnecessary or duplicate code
• You score 85% or higher on the performance Lighthouse test for both mobile and desktop

Merge

• All merge conflicts have been resolved
• At least one person has reviewed and approved your code

What needs to be tested?

I would like someone else to check if:

• All functionalities are working
• Everything adheres to the coding conventions
• I have followed all the DoD (Definition of Done)
• Performance testing
• Lighthouse testing

[netlify]

✅ Deploy Preview for mediahuis ready!

Name	Link
🔨 Latest commit	26d4a7d
🔍 Latest deploy log	https://app.netlify.com/sites/mediahuis/deploys/679206d4a0741f000846be8c
😎 Deploy Preview	https://deploy-preview-9--mediahuis.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.