Issue
Clicking the exit button on Page2 should remove any of the players that are run
Click on the play button, then click on the exit button. You will see, it removesPlayer.
On Page2 which has a teal background. Click on the first play button, then click on the exit button that is at the bottom of the screen, you have to scroll down to find it.
You will see the player is not removed. The same thing occurs with the next 3 videos, they are not removed.
How would this be fixed in the code so that clicking on any of the videos on Page2 then clicking on the exit button will remove the player?
Is there a solution that will work here to fix or resolve this issue?
I made the code here as small as possible.
This problem deals with multiple players.
Entirely different question being asked here. Also, the issue is very different.
This question also deals heavily with the CSS and the HTML that may need to be adjusted in the code.
code: https://jsfiddle.net/zrosmh45/
function removePlayer(wrapper) {
wrapper.player.destroy();
delete wrapper.player;
console.log("removePlayer");
}
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".remove");
const wrapper = container.querySelectorAll(".wrap");
wrapper.forEach(function(wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
(function showContainer2() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container2");
show(thewrap);
const cover = document.querySelector(".container1");
hide(cover);
}
const cover = document.querySelector(".exit");
cover.addEventListener("click", exitClickHandler);
})();
(function showContainer3() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container3");
show(thewrap);
const cover = document.querySelector(".container2");
hide(cover);
window.scrollTo(0, 0);
}
const cover = document.querySelector(".exit2");
cover.addEventListener("click", exitClickHandler);
})();
const manageCover = (function makeManageCover() {
function showCover(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
}
function openCurtain(curtain) {
curtain.classList.add("slide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
showCover(cover);
const curtain = evt.currentTarget.parentElement.parentElement.parentElement;
openCurtain(curtain);
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function init( /*selectors*/ ) {
//config.containers = document.querySelector(selectors.container);
// const allContainers = document.querySelector(".container");
//const playButtons = document.querySelector(selectors.playButton);
const allPlaybuttons = document.querySelectorAll(".cover");
//const allPlaybuttons = document.querySelectorAll(".embed-youtube-play");
addClickToButtons(allPlaybuttons);
}
return {
addCoverHandler,
init
};
}());
const manageUI = (function makeManageUI() {
document.body.scrollTop = 0;
const players = [];
function findPlayers() {
const allCovers = document.querySelectorAll(".cover");
const allWrappers = document.querySelectorAll(".wrap");
allCovers.forEach(function addToPlayers(cover, index) {
players.push({
"cover": cover,
"wrapper": allWrappers[index]
});
});
}
// inline arrow function, direct return
function getWrapper(cover) {
const index = players.findIndex(
(player) => player.cover === cover
);
return players[index].wrapper;
}
function exitClickHandler() {}
function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
function init() {
findPlayers();
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
}
return {
addExitHandlers,
getWrapper,
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let player;
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
}
function onPlayerStateChange(event) {
const player = event.target;
return player;
}
function addPlayer(video, playerOptions) {
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
const player = new YT.Player(video, playerOptions);
return player;
}
return {
addPlayer
};
}());
const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 1,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
function show(el) {
el.classList.remove("hide");
}
function combinePlayerOptions(opts1 = {}, opts2 = {}) {
const combined = Object.assign({}, opts1, opts2);
Object.keys(opts1).forEach(function checkObjects(prop) {
if (typeof opts1[prop] === "object") {
combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
}
});
return combined;
}
function createPlayer(videoWrapper, playerOptions = {}) {
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
return videoPlayer.addPlayer(video, options);
}
function playerAdder(wrapper, playerOptions) {
return function addPlayerCallback() {
initPlayer(wrapper, playerOptions);
};
}
function removePlayer(wrapper) {
wrapper.player.destroy();
delete wrapper.player;
console.log("removePlayer");
}
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".remove");
const wrapper = container.querySelectorAll(".wrap");
wrapper.forEach(function(wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
function initPlayer(wrapper, playerOptions) {
show(wrapper);
const player = createPlayer(wrapper, playerOptions);
wrapper.player = player;
}
return {
adder: playerAdder,
removePlayerHandler
};
}());
const players = (function coverUIPlayerFacade() {
function addPlayer(coverSelector, playerOptions) {
const cover = document.querySelector(coverSelector);
const wrapper = manageUI.getWrapper(cover);
const callback = managePlayer.adder(wrapper, playerOptions);
manageCover.addCoverHandler(coverSelector, callback);
}
function init() {
manageCover.init({
//container: ".container",
playButton: ".cover"
});
manageUI.init({});
manageUI.addExitHandlers(managePlayer.removePlayerHandler);
}
return {
add: addPlayer,
init
};
}());
players.init();
function onYouTubeIframeAPIReady() {
players.add(".playa", {
playerVars: {
loop: 1,
playlist: "djV11Xbc914"
}
});
players.add(".playb", {});
players.add(".playc", {});
players.add(".playd", {});
players.add(".playe", {
playerVars: {
playlist: ["mnfmQe8Mv1g", "M7lc1UVf-VE",
"-Xgi_way56U", "CHahce95B1g"
]
}
});
players.add(".playf", {});
players.add(".playg", {});
players.add(".playh", {});
players.add(".playi", {});
players.add(".playj", {
playerVars: {
playlist: ["mnfmQe8Mv1g", "M7lc1UVf-VE",
"-Xgi_way56U", "CHahce95B1g"
]
}
});
players.add(".playk", {});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #302b63;
}
.container2 .container {
background: teal;
}
.container3 .container {
background: red;
}
.container1 {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain1 {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 12px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
padding: 8px 8px;
}
.curtain {
margin: auto auto 40px;
max-width: 640px;
border: 21px solid;
border-radius: 12px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play::before {
position: absolute;
}
.embed-youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.embed-youtube .embed-youtube-play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
z-index: 1;
}
.embed-youtube-play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
.embed-youtube-play:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.embed-youtube-play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.embed-youtube.active .embed-youtube-play {
display: none;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: blue;
}
}
@keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: blue;
opacity: 1;
}
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
clip-path: circle(50%);
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
<div class="container1 ">
<div class="curtain1 remove">
<div class="ratio-keeper">
<div class="video-one"></div>
<div class="wrap embed-youtube ">
<div class="video embed-youtube " data-id="djV11Xbc914">
</div>
<button class="playa cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
<button class="exit" type="button" aria-label="Open"></button>
</div>
</div>
<div class="container2 hide">
<div class="container ">
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-two"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playb cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-three"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playc cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-four"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playd cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-five"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playe cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-six"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playf cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
<button class="exit exit2" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="container3 hide">
<div class="container ">
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-seven"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playg cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-eight"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playh cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="video-nine"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playi cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-ten"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playj cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="video-eleven"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playk cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
</div>
</div>
Solution
The problem is that, in page 2, there are multiple video players. In removePlayerHandler()
, it supposedly to retrieve the player list container element which contains multiple player container elements using closest()
, but the specified selector refers to the player container instead. i.e. .remove
instead of .container
.
From the found element, which is the last player container element, the following code would only find one .wrapper
element to remove the player from.
Fixed: https://jsfiddle.net/bfu6a0n7/
function removePlayerHandler(evt) {
const el = evt.target;
let container = el.closest(".container");
let wrappers;
if (container) { //if multiple players
wrappers = container.querySelectorAll(".remove .wrap");
} else { //if single player
container = el.closest(".remove");
wrappers = container.querySelectorAll(".wrap");
}
wrappers.forEach(function(wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
Answered By - Marci Kardon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.