From 0afd95fb78daafe8b72b4b2cabba039a56f0133c Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Sun, 20 Aug 2023 23:49:49 -0700
Subject: [PATCH] Add initial html for chapters selector in desc

---
 assets/css/default.css                        |  4 +++
 .../description_chapters_widget.ecr           | 27 +++++++++++++++++++
 src/invidious/views/watch.ecr                 | 10 +++++--
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/invidious/views/components/description_chapters_widget.ecr

diff --git a/assets/css/default.css b/assets/css/default.css
index a47762ec..90a65241 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -799,3 +799,7 @@ h1, h2, h3, h4, h5, p,
 #download_widget {
     width: 100%;
 }
+.description-chapters-content-container {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/src/invidious/views/components/description_chapters_widget.ecr b/src/invidious/views/components/description_chapters_widget.ecr
new file mode 100644
index 00000000..e5ecdb99
--- /dev/null
+++ b/src/invidious/views/components/description_chapters_widget.ecr
@@ -0,0 +1,27 @@
+<% if !chapters.empty? %>
+    <hr class="description-content-separator"/>
+    <div class="description-chapters-section">
+        <p class="description-chapter">
+        <h5>Chapters</h5>
+
+        <div class="description-chapters-content-container">
+            <% chapters.each do | chapter |%>
+                <div class="chapter">
+                    <a href="/watch?v=<%= video.id %>&t=<%=chapter.start_ms.milliseconds.total_seconds %>">
+                        <div class="thumbnail">
+                            <% if !env.get("preferences").as(Preferences).thin_mode %>
+                                <img loading="lazy" class="thumbnail" src="/vi/" alt="" />
+                            <%- else -%>
+                                <div class="thumbnail-placeholder"></div>
+                            <%- end -%>
+                        </div>
+
+                        <p><%= recode_length_seconds(chapter.start_ms.milliseconds.total_seconds) %></p>
+                        <p><%=chapter.title%></p>
+                    </a>
+                </div>
+            <% end %>
+        </div>
+    </div>
+    <hr class="description-content-separator"/>
+<% end %>
\ No newline at end of file
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 7a1cf2c3..5fab5b8c 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -254,10 +254,16 @@ we're going to need to do it here in order to allow for translations.
 
             <div id="description-box"> <!-- Description -->
                 <% if video.description.size < 200 || params.extend_desc %>
-                    <div id="descriptionWrapper"><%= video.description_html %></div>
+                    <div id="descriptionWrapper">
+                        <%= video.description_html %>
+                        <%= rendered "components/description_chapters_widget" %>
+                    </div>
                 <% else %>
                     <input id="descexpansionbutton" type="checkbox"/>
-                    <div id="descriptionWrapper"><%= video.description_html %></div>
+                    <div id="descriptionWrapper">
+                        <%= video.description_html %>
+                        <%= rendered "components/description_chapters_widget" %>
+                    </div>
                     <label for="descexpansionbutton">
                         <a></a>
                     </label>