Replacing 1 color with 2 new colors

[asasass]

Blue play svg gets removed, replaced by Green & Orange

To do that I did this:
Is that good, did I do this right?

And would you change visited to a different name?
Should it be called something different?

https://jsfiddle.net/g6tukx4s/

https://jsitor.com/nqTp5_mLoQ

.played.visited {
  fill: green;
}

.played {
  fill: orange;
}

  function markAsVisited(played) {
    played.classList.toggle("visited");
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

[asasass]

Maybe changing the names to this instead?

Unless if I would be writing the code differently.
https://jsfiddle.net/rb5ve8dw/1/

If how it is written is fine/good, then it just comes down to picking what names to call each.

.secondColor.firstColor {
  fill: green;
}

.secondColor {
  fill: orange;
}

  function markAsVisited(played) {
    played.classList.toggle("firstColor");
  }

  function markAsPlayed(played) {
    played.classList.add("secondColor");
  }

[PaulOB]

@asasass

Should it be called something different?

I don’t see any logic to the sequence of color changes so call it what you want. If you have a reason why there is a change in color then that would be the hint at what classname to use.

[asasass]

Blue is the initial state meaning, that play button has not been clicked.

Green, the next color means, that button was pressed 1 time.

Orange, the next color means, that same button was clicked a 2nd time.

That was my thinking in coming up with the color changes.

Maybe I don’t need that many color changes and should just stick to the 1.

Where it just changes to 1 color.

I don’t think adding in a pause svg would make sense being that, the Play svg would then only be seen 1 time on that button, then after it is clicked, would be on Pause, and stay as Pause. So, you would end up just re-clicking the same pause button.

The code isn’t even set up that way now that I think of it.

The video resets every time the Exit button is clicked.

The code uses this: player.destroy();
https://developers.google.com/youtube/iframe_api_reference

Removes the <iframe> containing the player.

So, adding a pause svg makes no sense in this case.

I could add a stop svg, but the same scenario as with adding a pause.