From bc306a3160c6ec5ecfbe46aba998f3e01bcb381c Mon Sep 17 00:00:00 2001
From: shagi <shagi@gisa-elkartea.org>
Date: Tue, 2 Aug 2022 14:26:31 +0200
Subject: [PATCH] =?UTF-8?q?A=C3=B1adir=20navegaci=C3=B3n=20por=20subt?=
 =?UTF-8?q?=C3=ADtulos=20a=20la=20web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/static/css/main.css | 20 ++++++++++++++++----
 web/templates/song.html | 39 +++++++++++++++++++++++----------------
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/web/static/css/main.css b/web/static/css/main.css
index 9f9abbb..ca9f41e 100644
--- a/web/static/css/main.css
+++ b/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%;
 }
diff --git a/web/templates/song.html b/web/templates/song.html
index 27b81f0..9e2aa79 100644
--- a/web/templates/song.html
+++ b/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 %}