From 266d4cc998184a8476b52afcc72b60ab233ab99c Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Mon, 22 Jan 2024 00:06:27 -0800
Subject: [PATCH] Don't use generic click handler for chapter widget

---
 assets/js/watch.js                                 |  6 ++++++
 .../components/description_chapters_widget.ecr     | 14 +++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/assets/js/watch.js b/assets/js/watch.js
index 26ad138f..bae4ca38 100644
--- a/assets/js/watch.js
+++ b/assets/js/watch.js
@@ -191,3 +191,9 @@ addEventListener('load', function (e) {
         comments.innerHTML = '';
     }
 });
+
+const chapter_widget_buttons = document.getElementsByClassName("chapter-widget-buttons")
+Array.from(chapter_widget_buttons).forEach(e => e.addEventListener("click", function (event) {
+    event.preventDefault();
+    player.currentTime(e.getAttribute('data-jump-time'));
+}))
\ No newline at end of file
diff --git a/src/invidious/views/components/description_chapters_widget.ecr b/src/invidious/views/components/description_chapters_widget.ecr
index 8ff5aa3c..a3bc30cb 100644
--- a/src/invidious/views/components/description_chapters_widget.ecr
+++ b/src/invidious/views/components/description_chapters_widget.ecr
@@ -10,21 +10,21 @@
         <div class="description-chapters-content-container">
             <% chapters.each do | chapter | %>
                 <%- start_in_seconds = chapter.start_ms.total_seconds.to_i %>
-                <a href="/watch?v=<%-= video.id %>&t=<%=start_in_seconds %>">
-                    <div class="chapter" data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>">
+                <a href="/watch?v=<%-= video.id %>&t=<%=start_in_seconds %>" data-jump-time="<%=start_in_seconds%>" class="chapter-widget-buttons">
+                    <div class="chapter">
                         <div class="thumbnail">
                             <%- if !env.get("preferences").as(Preferences).thin_mode -%>
-                                <img loading="lazy" class="thumbnail" src="<%-=URI.parse(chapter.thumbnails[-1]["url"].to_s).request_target %>" alt="" data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"/>
+                                <img loading="lazy" class="thumbnail" src="<%-=URI.parse(chapter.thumbnails[-1]["url"].to_s).request_target %>" alt="<%=chapter.title%>"/>
                             <%- else -%>
-                                <div class="thumbnail-placeholder" data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"></div>
+                                <div class="thumbnail-placeholder"></div>
                             <%- end -%>
                         </div>
                         <%- if start_in_seconds > 0 -%>
-                            <p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"><%-= recode_length_seconds(start_in_seconds) -%></p>
+                            <p><%-= recode_length_seconds(start_in_seconds) -%></p>
                         <%- else -%>
-                            <p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>">0:00</p>
+                            <p>0:00</p>
                         <%- end -%>
-                        <p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"><%-=chapter.title-%></p>
+                        <p><%-=chapter.title-%></p>
                     </div>
                 </a>
             <% end %>