Korbs/zorn-js
Archived
1
Fork 0
Code Issues Pull requests Activity

Add Subtitle feature

Browse source
This commit is contained in:
Korbs 2023-12-14 21:20:27 -05:00
parent 4ff3447516
commit e37198c8ad
No known key found for this signature in database
1 changed files with 51 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/functions/buttons.js
View file

@ -64,6 +64,7 @@ function AddControls() {
<span> / </span> <span> / </span>
<time id="duration">00:00</time> <time id="duration">00:00</time>
</div> </div>
<button id="subtitles"><i class="fa-solid fa-subtitles"></i></button>
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button> <button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
</div> </div>
</div> </div>
@ -81,6 +82,54 @@ function AddControls() {
function Util() { function Util() {
const videoControls = document.querySelector('.plyx-player-controls') const videoControls = document.querySelector('.plyx-player-controls')
// Subtitles
var subtitles = document.querySelector('.plyx-player-controls #subtitles');
var subtitleMenuButtons = [];
var createMenuItem = function(id, lang, label) {
var listItem = document.createElement('li');
var button = listItem.appendChild(document.createElement('button'));
button.setAttribute('id', id);
button.className = 'subtitles-button';
if (lang.length > 0) button.setAttribute('lang', lang);
button.value = label;
button.setAttribute('data-state', 'inactive');
button.appendChild(document.createTextNode(label));
button.addEventListener('click', function(e) {
subtitleMenuButtons.map(function(v, i, a) {
subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
});
var lang = this.getAttribute('lang');
for (var i = 0; i < video.textTracks.length; i++) {
if (video.textTracks[i].language == lang) {
video.textTracks[i].mode = 'showing';
this.setAttribute('data-state', 'active');
}
else {
video.textTracks[i].mode = 'hidden';
}
}
subtitlesMenu.style.display = 'none';
});
subtitleMenuButtons.push(button);
return listItem;
}
var subtitlesMenu;
if (video.textTracks) {
var df = document.createDocumentFragment();
var subtitlesMenu = df.appendChild(document.createElement('ul'));
subtitlesMenu.className = 'subtitles-menu';
subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
for (var i = 0; i < video.textTracks.length; i++) {
subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
}
videoContainer.appendChild(subtitlesMenu);
}
subtitles.addEventListener('click', function(e) {
if (subtitlesMenu) {
subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
}
});
// Play/Plause // Play/Plause
const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause') const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause')
@ -246,11 +295,13 @@ function Util() {
} }
videoControls.classList.add('hide') videoControls.classList.add('hide')
subtitlesMenu.classList.add('hide')
} }
// Show_Controls displays the video controls // Show_Controls displays the video controls
function Show_Controls() { function Show_Controls() {
videoControls.classList.remove('hide') videoControls.classList.remove('hide')
subtitlesMenu.classList.remove('hide')
} }
video.addEventListener('mouseenter', Show_Controls) video.addEventListener('mouseenter', Show_Controls)
video.addEventListener('mouseleave', Hide_Controls) video.addEventListener('mouseleave', Hide_Controls)