From e37198c8addc339daf13f78308834459f031528d Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Thu, 14 Dec 2023 21:20:27 -0500
Subject: [PATCH] Add Subtitle feature

---
 src/functions/buttons.js | 51 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

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() {
                     <span> / </span>
                     <time id="duration">00:00</time>
                     </div>
+                    <button id="subtitles"><i class="fa-solid fa-subtitles"></i></button>
                     <button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
                 </div>
             </div>
@@ -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)