This code has thePlay changed to cover in the css, html, javascript: using the old javascript: https://jsfiddle.net/p7bLnu3x/
Also, Iām not using svgās, Iām using css for the buttons instead.
Maybe there was confusion there, or maybe that is not something that matters.
This
<button class="playa cover" type="button" aria-label="Open"></button>
Instead of:
This which was not a good way of doing it.
<button class="playa thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</g>
</svg>
</button>
And this code is the new javascript we just did: https://jsfiddle.net/w30d4zr2/
// inline arrow function, direct return
function getWrapper(cover) {
const index = players.findIndex(
(player) => player.cover === cover
);
return players[index].wrapper;
}