Implemented subtitles display

index.html

@@ -109,7 +109,6 @@
               <use href="#timelink-icon">
             </svg>
           </button>
-          <!--
           <button id="subtitles-button"
                   title="Undertexter är av">
             <svg>
@@ -117,7 +116,6 @@
               <use href="#subtitles-on-icon" class="hidden"></use>
             </svg>
           </button>
-          -->
           <div class="select" id="resolution-select">
             <button id="resolution-current"
                     title="Välj upplösning"></button>

player.js

@@ -66,8 +66,7 @@ function init() {
             setupSwitching(mainstream)
             setupSync(mainstream)
             setupPlayback(body, mainstream)
-            // TODO: implement subs
-            // setupSubs(presentation.subtitles, mainstream)
+            setupSubs(presentation.subtitles)
         }
         awaitLoad(function() {
             setupBuffer(mainstream)
@@ -577,17 +576,25 @@ function setupSpeed() {
             button.addEventListener('click', setSpeed)})
 }
 
-function setupSubs(subs, mainstream) {
-    var subtrack = document.createElement('track')
-    subtrack.kind = 'subtitles'
-    subtrack.src = subs
-    mainstream.appendChild(subtrack)
+function setupSubs(subs) {
+    if(!subs) {
+        var button = document.querySelector('#subtitles-button')
+        button.parentNode.removeChild(button)
+        return
+    }
+    document.querySelectorAll('video').forEach(function(stream) {
+        var subtrack = document.createElement('track')
+        subtrack.kind = 'subtitles'
+        subtrack.src = subs
+        stream.appendChild(subtrack)
+    })
 
     var icons = document.querySelectorAll('#subtitles-button > svg > use')
-    
+
     function toggleSubs(event) {
         icons.forEach(function(icon) {
             icon.classList.toggle('hidden')})
+        var mainstream = document.querySelector('.main > video')
         var track = mainstream.textTracks[0]
         if(track.mode == 'disabled') {
             track.mode = 'showing'
@@ -606,6 +613,12 @@ function setupSwitching(mainstream) {
         var curmain = main.querySelector('video')
         var target = event.currentTarget
         var newmain = target.querySelector('video')
+        var curmode = curmain.textTracks[0].mode
+        var newmode = newmain.textTracks[0].mode
+
+        curmain.textTracks[0].mode = newmode
+        newmain.textTracks[0].mode = curmode
+
         main.replaceChild(newmain, curmain)
         target.insertBefore(curmain, target.firstElementChild)
     }

style.css

@@ -293,6 +293,11 @@ body {
     max-width: calc(var(--secondary-height) / 3);
 }
 
+/** subtitles **/
+video::cue {
+    background-color: var(--backdrop);
+}
+
 /** wide screens **/
 
 @media screen and (min-aspect-ratio: 16/9) {