Add initial html for chapters selector in desc

This commit is contained in:
syeopite 2023-08-20 23:49:49 -07:00
parent d9aeb2c360
commit 0afd95fb78
No known key found for this signature in database
GPG Key ID: A73C186DA3955A1A
3 changed files with 39 additions and 2 deletions

View File

@ -799,3 +799,7 @@ h1, h2, h3, h4, h5, p,
#download_widget { #download_widget {
width: 100%; width: 100%;
} }
.description-chapters-content-container {
display: flex;
flex-direction: row;
}

View File

@ -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 %>

View File

@ -254,10 +254,16 @@ we're going to need to do it here in order to allow for translations.
<div id="description-box"> <!-- Description --> <div id="description-box"> <!-- Description -->
<% if video.description.size < 200 || params.extend_desc %> <% 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 %> <% else %>
<input id="descexpansionbutton" type="checkbox"/> <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"> <label for="descexpansionbutton">
<a></a> <a></a>
</label> </label>