From 656a0c7327b06f9b7e1f27103d41f234a29b8b70 Mon Sep 17 00:00:00 2001
From: Nathan DeTar <n8detar@gmail.com>
Date: Thu, 10 Feb 2022 17:53:09 -0800
Subject: [PATCH] Added subtitle support to JS player. (#168)

---
 tubearchivist/static/script.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index 854e601..db91621 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -294,6 +294,14 @@ function createPlayer(button) {
     var videoThumbUrl = videoData.vid_thumb_url;
     var videoName = videoData.title;
 
+    var subtitles = '';
+    var videoSubtitles = videoData.subtitles; // Array of subtitles
+    if (typeof(videoSubtitles) != 'undefined') {
+        for (var i = 0; i < videoSubtitles.length; i++) {
+            subtitles += `<track label="${videoSubtitles[i].name}" kind="subtitles" srclang="${videoSubtitles[i].lang}" src="${videoSubtitles[i].media_url}">`;
+        }
+    }
+
     var playlist = '';
     var videoPlaylists = videoData.playlist; // Array of playlists the video is in
     if (typeof(videoPlaylists) != 'undefined') {
@@ -344,7 +352,10 @@ function createPlayer(button) {
 
     const markup = `
     <div class="video-player" data-id="${videoId}">
-        <video src="${videoUrl}#t=${videoProgress}" poster="${videoThumbUrl}" ontimeupdate="onVideoProgress('${videoId}')" controls autoplay type='video/mp4' width="100%" playsinline id="video-item"></video>
+        <video poster="${videoThumbUrl}" ontimeupdate="onVideoProgress('${videoId}')" controls autoplay width="100%" playsinline id="video-item">
+            <source src="${videoUrl}#t=${videoProgress}" type="video/mp4">
+            ${subtitles}
+        </video>
         <div class="player-title boxed-content">
             <img class="close-button" src="/static/img/icon-close.svg" alt="close-icon" data="${videoId}" onclick="removePlayer()" title="Close player">
             <img src="/static/img/icon-${playerState}.svg" alt="${playerState}-icon" id="${videoId}" onclick="is${watchedFunction}(this.id)" class="${playerState}-icon" title="Mark as ${watchedFunction}">