Merge 36ed5d3418 into eda7444ca4

assets/css/default.css

@@ -160,7 +160,9 @@ body a.pure-button {
 button.pure-button-primary,
 body a.pure-button-primary,
 .channel-owner:hover,
-.channel-owner:focus {
+.channel-owner:focus,
+.chapter:hover,
+.chapter:focus {
   background-color: #a0a0a0;
   color: rgba(35, 35, 35, 1);
 }
@@ -797,5 +799,26 @@ h1, h2, h3, h4, h5, p,
 }
 
 #download_widget {
-    width: 100%;
+  width: 100%;
+}
+
+.description-chapters-section {
+  white-space: normal;
+}
+
+.description-chapters-content-container {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  overflow: scroll;
+
+  overflow-y: hidden;
+}
+
+.chapter {
+  padding: 3px;
+}
+
+.chapter .thumbnail {
+  width: 200px;
 }

assets/css/player.css

@@ -114,6 +114,10 @@ ul.vjs-menu-content::-webkit-scrollbar {
   order: 5;
 }
 
+.vjs-chapters-button {
+  order: 5;
+}
+
 .vjs-share-control {
   order: 6;
 }

assets/js/player.js

@@ -17,6 +17,7 @@ var options = {
             'remainingTimeDisplay',
             'Spacer',
             'captionsButton',
+            'ChaptersButton',
             'audioTrackButton',
             'qualitySelector',
             'playbackRateMenuButton',

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'));
+}))

locales/en-US.json

@@ -496,5 +496,7 @@
     "toggle_theme": "Toggle Theme",
     "carousel_slide": "Slide {{current}} of {{total}}",
     "carousel_skip": "Skip the Carousel",
-    "carousel_go_to": "Go to slide `x`"
+    "carousel_go_to": "Go to slide `x`",
+    "video_chapters_label": "Chapters",
+    "video_chapters_auto_generated_label": "These chapters are auto-generated"
 }

src/invidious/jsonify/api_v1/video_json.cr

@@ -201,6 +201,14 @@ module Invidious::JSONify::APIv1
         end
       end
 
+      if !video.chapters.nil?
+        json.field "chapters" do
+          json.object do
+            video.chapters.to_json(json)
+          end
+        end
+      end
+
       if !video.music.empty?
         json.field "musicTracks" do
           json.array do

src/invidious/routes/api/v1/videos.cr

@@ -406,4 +406,41 @@ module Invidious::Routes::API::V1::Videos
       end
     end
   end
+
+  def self.chapters(env)
+    id = env.params.url["id"]
+    region = env.params.query["region"]? || env.params.body["region"]?
+
+    if id.nil? || id.size != 11 || !id.matches?(/^[\w-]+$/)
+      return error_json(400, "Invalid video ID")
+    end
+
+    format = env.params.query["format"]?
+
+    begin
+      video = get_video(id, region: region)
+    rescue ex : NotFoundException
+      haltf env, 404
+    rescue ex
+      haltf env, 500
+    end
+
+    begin
+      chapters = video.chapters
+    rescue ex
+      haltf env, 500
+    end
+
+    if chapters.nil?
+      return error_json(404, "No chapters are defined in video \"#{id}\"")
+    end
+
+    if format == "json"
+      env.response.content_type = "application/json"
+      return chapters.to_json
+    else
+      env.response.content_type = "text/vtt; charset=UTF-8"
+      return chapters.to_vtt
+    end
+  end
 end

src/invidious/routes/images.cr

@@ -160,6 +160,12 @@ module Invidious::Routes::Images
     id = env.params.url["id"]
     name = env.params.url["name"]
 
+    # Some thumbnails such as the ones for chapters requires some additional queries.
+    query_params = HTTP::Params.new
+    {"sqp", "rs"}.each do |name|
+      query_params[name] = env.params.query[name] if env.params.query[name]?
+    end
+
     headers = HTTP::Headers.new
 
     if name == "maxres.jpg"
@@ -173,7 +179,7 @@ module Invidious::Routes::Images
       end
     end
 
-    url = "/vi/#{id}/#{name}"
+    url = "/vi/#{id}/#{name}?#{query_params}"
 
     REQUEST_HEADERS_WHITELIST.each do |header|
       if env.request.headers[header]?

src/invidious/routing.cr

@@ -236,6 +236,7 @@ module Invidious::Routing
       get "/api/v1/annotations/:id", {{namespace}}::Videos, :annotations
       get "/api/v1/comments/:id", {{namespace}}::Videos, :comments
       get "/api/v1/clips/:id", {{namespace}}::Videos, :clips
+      get "/api/v1/chapters/:id", {{namespace}}::Videos, :chapters
 
       # Feeds
       get "/api/v1/trending", {{namespace}}::Feeds, :trending

src/invidious/videos.cr

@@ -15,7 +15,7 @@ struct Video
   # NOTE: don't forget to bump this number if any change is made to
   # the `params` structure in videos/parser.cr!!!
   #
-  SCHEMA_VERSION = 2
+  SCHEMA_VERSION = 3
 
   property id : String
 
@@ -26,6 +26,9 @@ struct Video
   @[DB::Field(ignore: true)]
   @captions = [] of Invidious::Videos::Captions::Metadata
 
+  @[DB::Field(ignore: true)]
+  @chapters : Invidious::Videos::Chapters? = nil
+
   @[DB::Field(ignore: true)]
   property adaptive_fmts : Array(Hash(String, JSON::Any))?
 
@@ -227,6 +230,24 @@ struct Video
     return @captions
   end
 
+  def chapters
+    # As the chapters key is always present in @info we need to check that it is
+    # actually populated
+    if @chapters.nil?
+      chapters = @info["chapters"].as_a
+      return nil if chapters.empty?
+
+      @chapters = Invidious::Videos::Chapters.from_raw_chapters(
+        chapters,
+        self.length_seconds,
+        # Should never be nil but just in case
+        is_auto_generated: @info["autoGeneratedChapters"].as_bool? || false
+      )
+    end
+
+    return @chapters
+  end
+
   def hls_manifest_url : String?
     info.dig?("streamingData", "hlsManifestUrl").try &.as_s
   end

src/invidious/videos/chapters.cr

@@ -0,0 +1,108 @@
+module Invidious::Videos
+  # A `Chapters` struct represents an sequence of chapters for a given video
+  struct Chapters
+    record Chapter, start_ms : Time::Span, end_ms : Time::Span, title : String, thumbnails : Array(Hash(String, Int32 | String))
+    property? auto_generated : Bool
+
+    def initialize(@chapters : Array(Chapter), @auto_generated : Bool)
+    end
+
+    # Constructs a chapters object from InnerTube's JSON object for chapters
+    #
+    # Requires the length of the video the chapters are associated to in order to construct correct ending time
+    def Chapters.from_raw_chapters(raw_chapters : Array(JSON::Any), video_length : Int32, is_auto_generated : Bool = false)
+      video_length_milliseconds = video_length.seconds.total_milliseconds
+
+      parsed_chapters = [] of Chapter
+
+      raw_chapters.each_with_index do |chapter, index|
+        chapter = chapter["chapterRenderer"]
+
+        title = chapter["title"]["simpleText"].as_s
+
+        raw_thumbnails = chapter["thumbnail"]["thumbnails"].as_a
+        thumbnails = raw_thumbnails.map do |thumbnail|
+          {
+            "url"    => thumbnail["url"].as_s,
+            "width"  => thumbnail["width"].as_i,
+            "height" => thumbnail["height"].as_i,
+          }
+        end
+
+        start_ms = chapter["timeRangeStartMillis"].as_i
+
+        # To get the ending range we have to peek at the next chapter.
+        # If we're the last chapter then we need to calculate the end time through the video length.
+        if next_chapter = raw_chapters[index + 1]?
+          end_ms = next_chapter["chapterRenderer"]["timeRangeStartMillis"].as_i
+        else
+          end_ms = video_length_milliseconds.to_i
+        end
+
+        parsed_chapters << Chapter.new(
+          start_ms: start_ms.milliseconds,
+          end_ms: end_ms.milliseconds,
+          title: title,
+          thumbnails: thumbnails,
+        )
+      end
+
+      return Chapters.new(parsed_chapters, is_auto_generated)
+    end
+
+    # Calls the given block for each chapter and passes it as a parameter
+    def each(&)
+      @chapters.each { |c| yield c }
+    end
+
+    # Converts the sequence of chapters to a WebVTT representation
+    def to_vtt
+      vtt = WebVTT.build do |build|
+        self.each do |chapter|
+          build.cue(chapter.start_ms, chapter.end_ms, chapter.title)
+        end
+      end
+    end
+
+    # Dumps a JSON representation of the sequence of chapters to the given JSON::Builder
+    def to_json(json : JSON::Builder)
+      json.field "autoGenerated", @auto_generated.to_s
+      json.field "chapters" do
+        json.array do
+          @chapters.each do |chapter|
+            json.object do
+              json.field "title", chapter.title
+              json.field "startMs", chapter.start_ms.total_milliseconds
+              json.field "endMs", chapter.end_ms.total_milliseconds
+
+              json.field "thumbnails" do
+                json.array do
+                  chapter.thumbnails.each do |thumbnail|
+                    json.object do
+                      json.field "url", URI.parse(thumbnail["url"].as(String)).request_target
+                      json.field "width", thumbnail["width"]
+                      json.field "height", thumbnail["height"]
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    # Create a JSON representation of the sequence of chapters
+    def to_json
+      JSON.build do |json|
+        json.object do
+          json.field "chapters" do
+            json.object do
+              to_json(json)
+            end
+          end
+        end
+      end
+    end
+  end
+end

src/invidious/videos/parser.cr

@@ -243,11 +243,12 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
     end
   end
 
+  player_overlays = player_response.dig?("playerOverlays", "playerOverlayRenderer")
+
   # If nothing was found previously, fall back to end screen renderer
   if related.empty?
     # Container for "endScreenVideoRenderer" items
-    player_overlays = player_response.dig?(
-      "playerOverlays", "playerOverlayRenderer",
+    end_screen_watch_next_array = player_overlays.try &.dig?(
       "endScreen", "watchNextEndScreenRenderer", "results"
     )
 
@@ -389,6 +390,32 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
       .try &.as_s.split(" ", 2)[0]
   end
 
+  # Chapters
+  chapters_array = [] of JSON::Any
+  chapters_auto_generated = nil
+
+  # Yes,`decoratedPlayerBarRenderer` is repeated twice.
+  if player_bar = player_overlays.try &.dig?("decoratedPlayerBarRenderer", "decoratedPlayerBarRenderer", "playerBar")
+    if markers = player_bar.dig?("multiMarkersPlayerBarRenderer", "markersMap")
+      potential_chapters_array = markers.as_a.find(&.["key"]?.try &.== "DESCRIPTION_CHAPTERS")
+
+      # Chapters that are manually created should have a higher precedence than automatically generated chapters
+      if !potential_chapters_array
+        potential_chapters_array = markers.as_a.find(&.["key"]?.try &.== "AUTO_CHAPTERS")
+      end
+
+      if potential_chapters_array
+        if potential_chapters_array["key"] == "AUTO_CHAPTERS"
+          chapters_auto_generated = true
+        else
+          chapters_auto_generated = false
+        end
+
+        chapters_array = potential_chapters_array["value"]["chapters"].as_a
+      end
+    end
+  end
+
   # Return data
 
   if live_now
@@ -409,13 +436,15 @@ def parse_video_info(video_id : String, player_response : Hash(String, JSON::Any
     "lengthSeconds" => JSON::Any.new(length_txt || 0_i64),
     "published"     => JSON::Any.new(published.to_rfc3339),
     # Extra video infos
-    "allowedRegions"   => JSON::Any.new(allowed_regions.map { |v| JSON::Any.new(v) }),
-    "allowRatings"     => JSON::Any.new(allow_ratings || false),
-    "isFamilyFriendly" => JSON::Any.new(family_friendly || false),
-    "isListed"         => JSON::Any.new(is_listed || false),
-    "isUpcoming"       => JSON::Any.new(is_upcoming || false),
-    "keywords"         => JSON::Any.new(keywords.map { |v| JSON::Any.new(v) }),
-    "isPostLiveDvr"    => JSON::Any.new(post_live_dvr),
+    "allowedRegions"        => JSON::Any.new(allowed_regions.map { |v| JSON::Any.new(v) }),
+    "allowRatings"          => JSON::Any.new(allow_ratings || false),
+    "isFamilyFriendly"      => JSON::Any.new(family_friendly || false),
+    "isListed"              => JSON::Any.new(is_listed || false),
+    "isUpcoming"            => JSON::Any.new(is_upcoming || false),
+    "keywords"              => JSON::Any.new(keywords.map { |v| JSON::Any.new(v) }),
+    "isPostLiveDvr"         => JSON::Any.new(post_live_dvr),
+    "autoGeneratedChapters" => JSON::Any.new(chapters_auto_generated),
+    "chapters"              => JSON::Any.new(chapters_array),
     # Related videos
     "relatedVideos" => JSON::Any.new(related),
     # Description

src/invidious/views/components/description_chapters_widget.ecr

@@ -0,0 +1,34 @@
+<% if chapters = video.chapters %>
+    <div class="description-chapters-section">
+        <hr class="description-content-separator"/>
+        <h4><%=HTML.escape(translate(locale, "video_chapters_label"))%></h4>
+
+        <% if chapters.auto_generated? %> 
+          <h5><%=HTML.escape(translate(locale, "video_chapters_auto_generated_label"))%> </h5>
+        <% end %>
+
+        <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 %>" 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="<%=chapter.title%>"/>
+                            <%- else -%>
+                                <div class="thumbnail-placeholder"></div>
+                            <%- end -%>
+                        </div>
+                        <%- if start_in_seconds > 0 -%>
+                            <p><%-= recode_length_seconds(start_in_seconds) -%></p>
+                        <%- else -%>
+                            <p>0:00</p>
+                        <%- end -%>
+                        <p><%-=chapter.title-%></p>
+                    </div>
+                </a>
+            <% end %>
+        </div>
+        <hr class="description-content-separator"/>
+    </div>
+<% end %>

src/invidious/views/components/player.ecr

@@ -63,6 +63,10 @@
         <% captions.each do |caption| %>
             <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name %>" label="<%= caption.name %>">
         <% end %>
+
+        <% if !video.chapters.nil? %>
+            <track kind="chapters" src="/api/v1/chapters/<%= video.id %>">
+        <% end %>
     <% end %>
 </video>
 

src/invidious/views/watch.ecr

@@ -254,10 +254,14 @@ 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>