Add Subtitles support

2024-11-30 23:23:57 -05:00 · 2024-11-30 23:23:57 -05:00 · 01b374519a
parent 2e8d41d997
commit 01b374519a
1 changed files with 65 additions and 0 deletions
--- a/src/Controls/Subtitles.astro
+++ b/src/Controls/Subtitles.astro
@ -0,0 +1,65 @@
+---
+const {
+    PlayerName
+} = Astro.props
+---
+
+<script is:inline define:vars={{PlayerName}}>
+    var Player = document.querySelector("#zorn-player-" + PlayerName + ' video')
+    var VideoContainer = document.querySelector("#zorn-player-" + PlayerName)
+
+    var subtitleMenuButtons = []
+        var createMenuItem = function(id, lang, label) {
+            var listItem = document.createElement('button')
+            listItem.setAttribute('id', id)
+            listItem.className = 'subtitles-button'
+            if (lang.length > 0) listItem.setAttribute('lang', lang)
+            listItem.value = label
+            listItem.setAttribute('data-state', 'inactive')
+            listItem.appendChild(document.createTextNode(label))
+            listItem.addEventListener('click', function(e) {
+                // Set all buttons to inactive
+                subtitleMenuButtons.map(function(v, i, a) {
+                    subtitleMenuButtons[i].setAttribute('data-state', 'inactive')
+                })
+                // Find the language to activate
+                var lang = this.getAttribute('lang')
+                for (var i = 0; i < Player.textTracks.length; i++) {
+                    // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+                    if (Player.textTracks[i].language == lang) {
+                        Player.textTracks[i].mode = 'showing'
+                        this.setAttribute('data-state', 'active')
+                    }
+                    else {
+                        Player.textTracks[i].mode = 'hidden'
+                    }
+                }
+                subtitlesMenu.style.display = 'none'
+            })
+            subtitleMenuButtons.push(listItem)
+            return listItem
+        }
+        // Go through each one and build a small clickable list, and when each item is clicked on, set its mode to be "showing" and the others to be "hidden"
+        var subtitlesMenu
+        if (Player.textTracks) {
+            var df = document.createDocumentFragment()
+            var subtitlesMenu = df.appendChild(document.createElement('div'))
+            subtitlesMenu.className = 'vc-menu'
+            subtitlesMenu.id = 'subtitles'
+            subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'))
+            for (var i = 0; i < Player.textTracks.length; i++) {
+                subtitlesMenu.appendChild(createMenuItem('subtitles-' + Player.textTracks[i].language, Player.textTracks[i].language, Player.textTracks[i].label))
+            }
+            VideoContainer.appendChild(subtitlesMenu)
+        }
+        document.querySelector("#zorn-player-" + PlayerName + ' .vc-menu#subtitles *').addEventListener('click', function(e) {
+            if (subtitlesMenu) {
+                subtitlesMenu.style.display = (subtitlesMenu.style.display == 'flex' ? 'none' : 'flex')
+            }
+        })
+        document.querySelector("#zorn-player-" + PlayerName + ' #vc-subtitles').addEventListener('click', function(e) {
+            if (subtitlesMenu) {
+                subtitlesMenu.style.display = (subtitlesMenu.style.display == 'flex' ? 'none' : 'flex')
+            }
+        })
+</script>