From bbb452ef7749d6d3036752fc713090c4fdbd551a 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                        |  5 ++++
 .../description_chapters_widget.ecr           | 27 +++++++++++++++++++
 src/invidious/views/watch.ecr                 | 10 +++++--
 3 files changed, 40 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 c31b24e5..75195714 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -759,3 +759,8 @@ h1, h2, h3, h4, h5, p,
 .channel-emoji {
   margin: 0 2px;
 }
+
+.description-chapters-content-container {
+  display: flex;
+  flex-direction: row;
+}
\ 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
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 498d57a1..9d080988 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -236,10 +236,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>