diff --git a/src/functions/buttons.js b/src/functions/buttons.js index fdbbc10..ea269fc 100644 --- a/src/functions/buttons.js +++ b/src/functions/buttons.js @@ -64,6 +64,7 @@ function AddControls() { / + @@ -81,6 +82,54 @@ function AddControls() { function Util() { 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 const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause') @@ -246,11 +295,13 @@ function Util() { } videoControls.classList.add('hide') + subtitlesMenu.classList.add('hide') } // Show_Controls displays the video controls function Show_Controls() { videoControls.classList.remove('hide') + subtitlesMenu.classList.remove('hide') } video.addEventListener('mouseenter', Show_Controls) video.addEventListener('mouseleave', Hide_Controls)