That will break all other players when there is more than one of them on a page, which is why that other technique was being used instead.
The hideInitialOverlay and associated clickHandler functions are safe when there are other players are on the same page.
That will break all other players when there is more than one of them on a page.
More than one of these?
I have 2 players that use this.
function hideAllButtons(button) {
button.querySelectorAll("svg").forEach(hide);
}
On second look, that code is restricted to running only within the one button.
I at first thought that it was getting all of the SVG elements from all over the page, which would have been bad.
Go ahead and use it, and take out the hideInitialOverlay() function. We have no easy to access documentation to explain why that was there in the first place, so remove it, and it can be added back in later on if required.
Thatâs why thereâs no issue here?
Do you remember why initialOverlayClickHandler was required?
Could you even find the appropriate posts where we dealt with the issue?
There are some bug-tracking techniques that can help to provide such answers, and systems of development that make it easier to find answers to such things.
Version control and bug reports are something that we havenât been doing. Without that, well just have to accept more work if we come across a situation where that solution is once again needed.
You think I should leave this in there then?
function hideInitialOverlay(button) {
var button = getButtonContainer(button);
hide(button.querySelector(".initial"));
}
function initialOverlayClickHandler(evt) {
var button = getButtonContainer(evt.target);
hideInitialOverlay(button);
button.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
playButtonClickHandler(evt);
}
No, throw it overboard. We can easily get another when itâs needed.
Just curious,
How would I have resolved this in it?
Redefinition of 'button' from line 18.
var button = getButtonContainer(button);
function hideInitialOverlay(button) {
var button = getButtonContainer(button);
hide(button.querySelector(".initial"));
}
You would have resolved that by not redefining button. Decide if the function needs to have button passed to it. If it does then get rid of the var statement. If it doesnât, then remove button from the function parameters and keep the var statement.
I wouldâve removed the var statement, and kept this?
function hideInitialOverlay(button) {
hide(button.querySelector(".initial"));
}
That works:
Thatâs right. Simple eh?
I would then remove, This:
var button = getButtonContainer(evt.target);
From this, right?
function initialOverlayClickHandler(evt) {
var button = getButtonContainer(evt.target);
hideInitialOverlay(button);
button.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
playButtonClickHandler(evt);
}
No you wouldnât, for thatâs how that initialOverlayClickHandler() function gets the button.
But I removed it from this:
function hideInitialOverlay(button) {
var button = getButtonContainer(button);
hide(button.querySelector(".initial"));
}
How come the player works without it?
Thatâs right. The problem there is that the button exists from the function parameter, and you are attempting to also create a new variable with the same button name.
ok, so then this stays then:
var button = getButtonContainer(evt.target);
function initialOverlayClickHandler(evt) {
var button = getButtonContainer(evt.target);
hideInitialOverlay(button);
button.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
playButtonClickHandler(evt);
}
Yes it does.
Can
return player.paused === false;
Be taken out and be put somewhere?
Can I put it into its own function or something?
function showPause(button) {
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
showPauseButton(button);
}
}
function showSpeaker(button) {
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
};
if (player.isPlaying()) {
showSpeakerButton(button);
}
}