Añadir navegación por subtítulos a la web

web/static/css/main.css

@@ -1,3 +1,8 @@
+:root {
+    --font-color: #aaa;
+    --background-color: #232323;
+}
+
 @font-face {
     font-family: "CyrBit";
     src: url("CyrBit.ttf");
@@ -6,14 +11,14 @@
 body {
     display: flex;
     flex-wrap: wrap;
-    background-color: #232323;
-    color: #aaa;
+    background-color: var(--background-color);
+    color: var(--font-color);
     font-family: "CyrBit";
     font-size: 20pt;
 }
 
 a {
-    color: #aaa;
+    color: var(--font-color);
     text-decoration: none;
 }
 
@@ -60,7 +65,7 @@ table td, table th {
 }
 
 #libreto, #playlist, #onion, #ipfs, #todo {
-    border: 1px solid #aaa;
+    border: 1px solid var(--font-color);
     border-radius: 0.5em;
     text-align: center;
 }
@@ -103,6 +108,13 @@ video {
     line-height: 1.2em;
 }
 
+.lyrics button {
+    border: 1px solid;
+    background: transparent;
+    color: var(--font-color);
+    border-radius: 0.6em;
+}
+
 #song-playlist #video-playlist {
     width: 100%;
 }

web/templates/song.html

@@ -22,6 +22,23 @@
     </video>
     {% endif %}
 
+    {% if parsed_srt %}
+    <p class="lyrics">
+    {% for line in parsed_srt %}
+        <button type="button" class="srtline" data-seconds="{{ line.start.total_seconds() }}">&vrtri;</button>
+         {{ line.content }}<br/>
+    {% endfor %}
+    </p>
+    {% endif %}
+
+    {% if song.files %}
+    <ul class="files">
+        {% for entry in song.files %}
+            <li><a href="{{ entry|url }}">{{ entry.name }}</a></li>
+        {% endfor %}
+    </ul>
+    {% endif %}
+
     <script>
     let player = videojs('song-{{ song.path.name }}-video');
     {% if song.karaoke_ass or song.ass %}
@@ -45,22 +62,12 @@
             SubtitlesOctopusOnLoad();
         }
     });
+    const subtitleButtons = document.querySelectorAll('.lyrics button');
+    for (let btn of subtitleButtons) {
+        btn.addEventListener('click', function() {
+            player.currentTime(this.dataset.seconds);
+        });
+    }
     {% endif %}
     </script>
-
-    {% if parsed_srt %}
-    <p class="lyrics">
-    {% for line in parsed_srt %}
-        {{ line.content }}<br/>
-    {% endfor %}
-    </p>
-    {% endif %}
-
-    {% if song.files %}
-    <ul class="files">
-        {% for entry in song.files %}
-            <li><a href="{{ entry|url }}">{{ entry.name }}</a></li>
-        {% endfor %}
-    </ul>
-    {% endif %}
 {% endblock %}