Skip to content

Closes #5490 Update text on media video play/pause buttons. #5505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
joshuasosa wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Closes #5490 Update text on media video play/pause buttons. #5505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 26 additions & 36 deletions ...les/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_vimeo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,26 +67,6 @@
}
}

// Helper function for play button click
function handlePlayButtonClick(element, parentParagraph) {
return (event) => {
event.preventDefault();
element.player.play().catch((error) => vimeoError(error));
parentParagraph.classList.add('az-video-playing');
parentParagraph.classList.remove('az-video-paused');
};
}

// Helper function for pause button click
function handlePauseButtonClick(element, parentParagraph) {
return (event) => {
event.preventDefault();
element.player.pause().catch((error) => vimeoError(error));
parentParagraph.classList.add('az-video-paused');
parentParagraph.classList.remove('az-video-playing');
};
}

// Helper function to initialize a single Vimeo element
function initVimeoElement(element, defaultOptions) {
const parentParagraph = element.parentNode;
Expand All @@ -111,23 +91,33 @@
parentParagraph.classList.add('az-video-playing');
});

// Play Button
const playButtons = element.getElementsByClassName('az-video-play');
if (playButtons[0]) {
playButtons[0].addEventListener(
'click',
handlePlayButtonClick(element, parentParagraph),
);
}
// Set the iframe tabindex to -1 to prevent focus from reaching iframe.
element.player.ready().then(() => {
const iframe = element.player.element;
if (iframe) {
iframe.setAttribute('tabindex', '-1');
}
});

// Pause Button
const pauseButtons = element.getElementsByClassName('az-video-pause');
if (pauseButtons[0]) {
pauseButtons[0].addEventListener(
'click',
handlePauseButtonClick(element, parentParagraph),
);
}
// Play/Pause button toggle.
const playPauseButton =
element.getElementsByClassName('az-video-playpause')[0];
playPauseButton.addEventListener('click', (event) => {
event.preventDefault();
if (event.currentTarget.textContent === 'Play Video') {
element.player.play().catch((error) => vimeoError(error));
parentParagraph.classList.remove('az-video-paused');
parentParagraph.classList.add('az-video-playing');
event.currentTarget.textContent = 'Pause Video';
event.currentTarget.setAttribute('title', 'Pause the video');
} else {
element.player.pause().catch((error) => vimeoError(error));
parentParagraph.classList.remove('az-video-playing');
parentParagraph.classList.add('az-video-paused');
event.currentTarget.textContent = 'Play Video';
event.currentTarget.setAttribute('title', 'Play the video');
}
});
}

// Helper function to handle API loaded callback
Expand Down
36 changes: 22 additions & 14 deletions ...s/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_youtube.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,21 +54,25 @@
onStateChange: window.onPlayerStateChange,
},
});
const playButton =
element.getElementsByClassName('az-video-play')[0];
playButton.addEventListener('click', (event) => {
event.preventDefault();
element.player.playVideo();
parentParagraph.classList.remove('az-video-paused');
parentParagraph.classList.add('az-video-playing');
});
const pauseButton =
element.getElementsByClassName('az-video-pause')[0];
pauseButton.addEventListener('click', (event) => {

// Play/Pause button toggle.
const playPauseButton =
element.getElementsByClassName('az-video-playpause')[0];
playPauseButton.addEventListener('click', (event) => {
event.preventDefault();
element.player.pauseVideo();
parentParagraph.classList.remove('az-video-playing');
parentParagraph.classList.add('az-video-paused');
if (event.currentTarget.textContent === 'Play Video') {
element.player.playVideo();
parentParagraph.classList.remove('az-video-paused');
parentParagraph.classList.add('az-video-playing');
event.currentTarget.textContent = 'Pause Video';
event.currentTarget.setAttribute('title', 'Pause the video');
} else {
element.player.pauseVideo();
parentParagraph.classList.remove('az-video-playing');
parentParagraph.classList.add('az-video-paused');
event.currentTarget.textContent = 'Play Video';
event.currentTarget.setAttribute('title', 'Play the video');
}
});
});
};
Expand Down Expand Up @@ -119,6 +123,10 @@
};

window.onPlayerReady = (event) => {
// Set the iframe tabindex to -1 to prevent focus from reaching iframe.
const iframe = event.target.getIframe();
iframe.setAttribute('tabindex', '-1');

const id = event.target.options.videoId;
if (!bgVideoSettings[id].autoplay) {
return;
Expand Down
3 changes: 1 addition & 2 deletions ...graphs/az_paragraphs_text_media/templates/media--az-remote-video--az-background.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,4 @@
<div class="az-video-container">
<div class="az-video-player"></div>
</div>
<div class="bg-video-player-control btn btn-light az-video-pause video-pause" title="Pause the Video" aria-hidden="">Pause Video</div>
<div class="bg-video-player-control btn btn-light az-video-play video-play" title="Play the video" aria-hidden="">Play Video</div>
<button type="button" class="bg-video-player-control btn btn-light az-video-playpause video-playpause" title="Pause the Video" aria-hidden="">Pause Video</button>
7 changes: 0 additions & 7 deletions modules/custom/az_paragraphs/css/az_paragraphs_az_text_media.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
right: 0;
font-size: 0.9em;
color: #0c234b;
z-index: -102;
cursor: pointer;
padding: 0.3em 0.6em;
border: none;
Expand All @@ -60,12 +59,6 @@
color: #ab0520;
border-color: #ab0520;
}
.az-video-playing .az-video-pause {
z-index: 2;
}
.az-video-paused .az-video-play {
z-index: 2;
}
.az-video-container iframe {
position: absolute;
}
Expand Down
Loading