Merge 36ed5d3418 into 4782a67038

Closes issue 4880

.github/workflows/build-stable-container.yml

@@ -1,6 +1,7 @@
 name: Build and release container
 
 on:
+  workflow_dispatch:
   push:
     tags:
       - "v*"
@@ -46,9 +47,11 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: quay.io/invidious/invidious
+          flavor: |
+            latest=false
           tags: |
             type=semver,pattern={{version}}
-            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'master') }}
+            type=raw,value=latest
           labels: |
             quay.expires-after=12w
 
@@ -70,10 +73,11 @@ jobs:
         with:
           images: quay.io/invidious/invidious
           flavor: |
+            latest=false
             suffix=-arm64
           tags: |
             type=semver,pattern={{version}}
-            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'master') }}
+            type=raw,value=latest
           labels: |
             quay.expires-after=12w
 

CHANGELOG.md

@@ -1,6 +1,189 @@
 # CHANGELOG
 
-## 2024-04-26
+
+## v2.20240825.2 (2024-08-26)
+
+This releases fixes the container tags pushed on quay.io.
+Previously, the ARM64 build was released under the `latest` tag, instead of `latest-arm64`.
+
+### Full list of pull requests merged since the last release (newest first)
+
+CI: Fix docker container tags ([#4883], by @SamantazFox)
+
+[#4877]: https://github.com/iv-org/invidious/pull/4877
+
+
+## v2.20240825.1 (2024-08-25)
+
+Add patch component to be [semver] compliant and make github actions happy.
+
+[semver]: https://semver.org/
+
+### Full list of pull requests merged since the last release (newest first)
+
+Allow manual trigger of release-container build ([#4877], thanks @syeopite)
+
+[#4877]: https://github.com/iv-org/invidious/pull/4877
+
+
+## v2.20240825.0 (2024-08-25)
+
+### New features & important changes
+
+#### For users
+
+* The search bar now has a button that you can click!
+* Youtube URLs can be pasted directly in the search bar. Prepend search query with a
+  backslash (`\`) to disable that feature (useful if you need to search for a video whose
+  title contains some youtube URL).
+* On the channel page the "streams" tab can be sorted by either: "newest", "oldest" or "popular"
+* Lots of translations have been updated (thanks to our contributors on Weblate!)
+* Videos embedded in local HTML files (e.g: a webpage saved from a blog) can now be played
+
+#### For instance owners
+
+* Invidious now has the ability to provide a `po_token` and `visitordata` to Youtube in order to
+  circumvent current Youtube restrictions.
+* Invidious can use an (optional) external signature server like [inv_sig_helper]. Please note that
+  some videos can't be played without that signature server.
+* The Helm charts were moved to a separate repo: https://github.com/iv-org/invidious-helm-chart
+* We have changed how containers are released: the `latest` tag now tracks tagged releases, whereas
+  the `master` tag tracks the most recent commits of the `master` branch ("nightly" builds).
+
+[inv_sig_helper]: https://github.com/iv-org/inv_sig_helper
+
+#### For developpers
+
+* The versions of Crystal that we test in CI/CD are now: `1.9.2`, `1.10.1`, `1.11.2`, `1.12.1`.
+  Please note that due to a bug in the `libxml` bindings (See [#4256]), versions prior to `1.10.0`
+  are not recommended to use.
+* Thanks to @syeopite, the code is now [ameba] compliant.
+* Ameba is part of our CI/CD pipeline, and its rules will be enforced in future PRs.
+* The transcript code has been rewritten to permit transcripts as a feature rather than being
+  only a workaround for captions. Trancripts feature is coming soon!
+* Various fixes regarding the logic interacting with Youtube
+* The `sort_by` parameter can be used on the `/api/v1/channels/{id}/streams` endpoint. Accepted
+  values are: "newest", "oldest" and "popular"
+
+[ameba]: https://github.com/crystal-ameba/ameba
+[#4256]: https://github.com/iv-org/invidious/issues/4256
+
+
+### Bugs fixed
+
+#### User-side
+
+* Channels: fixed broken "subscribers" and "views" counters
+* Watch page: playback position is reset at the end of a video, so that the next time this video
+  is watched, it will start from the beginning rather than 15 seconds before the end
+* Watch page: the items in the "add to playlist" drop down are now sorted alphabetically
+* Videos: the "genre" URL is now always pointing to a valid webpage
+* Playlists: Fixed `Could not parse N episodes` error on podcast playlists
+* All external links should now have the [`rel`] attibute set to `noreferrer noopener` for
+  increased privacy.
+* Preferences: Fixed the admin-only "modified source code" input being ignored
+* Watch/channel pages: use the full image URL in `og:image` and `twitter:image` meta tags
+
+[`rel`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+
+#### API
+
+* fixed the `local` parameter not applying to `formatStreams` on `/api/v1/videos/{id}`
+* fixed an `Index out of bounds` error hapenning when a playlist had no videos
+* fixed duplicated query parameters in proxied video URLs
+* Return actual video height/width/fps rather than hard coded values
+* Fixed the `/api/v1/popular` endpoint not returning a proper error code/message when the
+  popular page/endpoint are disabled.
+
+
+### Full list of pull requests merged since the last release (newest first)
+
+* HTML: Sort playlists alphabetically in watch page drop down ([#4853], by @SamantazFox)
+* Videos: Fix XSS vulnerability in description/comments ([#4852], thanks _anonymous_)
+* YtAPI: Bump client versions ([#4849], by @SamantazFox)
+* SigHelper: Fix inverted time comparison in 'check_update' ([#4845], by @SamantazFox)
+* Storyboards: Various fixes and code cleaning ([#4153], by SamantazFox)
+* Fix lint errors introduced in #4146 and #4295 ([#4876], thanks @syeopite)
+* Search: Add support for Youtube URLs ([#4146], by @SamantazFox)
+* Channel: Render age restricted channels ([#4295], thanks @ChunkyProgrammer)
+* Ameba: Miscellaneous fixes ([#4807], thanks @syeopite)
+* API: Proxy formatStreams URLs too ([#4859], thanks @colinleroy)
+* UI: Add search button to search bar ([#4706], thanks @thansk)
+* Add ability to set po_token and visitordata ID ([#4789], thanks @unixfox)
+* Add support for an external signature server ([#4772], by @SamantazFox)
+* Ameba: Fix Naming/VariableNames ([#4790], thanks @syeopite)
+* Translations update from Hosted Weblate ([#4659])
+* Ameba: Fix Lint/UselessAssign ([#4795], thanks @syeopite)
+* HTML: Add rel="noreferrer noopener" to external links ([#4667], thanks @ulmemxpoc)
+* Remove unused methods in Invidious::LogHandler ([#4812], thanks @syeopite)
+* Ameba: Fix Lint/NotNilAfterNoBang ([#4796], thanks @syeopite)
+* Ameba: Fix unused argument Lint warnings ([#4805], thanks @syeopite)
+* Ameba: i18next.cr fixes ([#4806], thanks @syeopite)
+* Ameba: Disable rules ([#4792], thanks @syeopite)
+* Channel: parse subscriber count and channel banner ([#4785], thanks @ChunkyProgrammer)
+* Player: Fix playback position of already watched videos ([#4731], thanks @Fijxu)
+* Videos: Fix genre url being unusable ([#4717], thanks @meatball133)
+* API: Fix out of bound error on empty playlists ([#4696], thanks @Fijxu)
+* Handle playlists cataloged as Podcast ([#4695], thanks @Fijxu)
+* API: Fix duplicated query parameters in proxied video URLs ([#4587], thanks @absidue)
+* API: Return actual stream height, width and fps ([#4586], thanks @absidue)
+* Preferences: Fix handling of modified source code URL ([#4437], thanks @nooptek)
+* API: Fix URL for vtt subtitles ([#4221], thanks @karelrooted)
+* Channels: Add sort options to streams ([#4224], thanks @src-tinkerer)
+* API: Fix error code for disabled popular endpoint ([#4296], thanks @iBicha)
+* Allow embedding videos in local HTML files ([#4450], thanks @tomasz1986)
+* CI: Bump Crystal version matrix ([#4654], by @SamantazFox)
+* YtAPI: Remove API keys like official clients ([#4655], by @SamantazFox)
+* HTML: Use full URL in the og:image property ([#4675], thanks @Fijxu)
+* Rewrite transcript logic to be more generic ([#4747], thanks @syeopite)
+* CI: Run Ameba ([#4753], thanks @syeopite)
+* CI: Add release based containers ([#4763], thanks @syeopite)
+* move helm chart to a dedicated github repository ([#4711], thanks @unixfox)
+
+[#4146]: https://github.com/iv-org/invidious/pull/4146
+[#4153]: https://github.com/iv-org/invidious/pull/4153
+[#4221]: https://github.com/iv-org/invidious/pull/4221
+[#4224]: https://github.com/iv-org/invidious/pull/4224
+[#4295]: https://github.com/iv-org/invidious/pull/4295
+[#4296]: https://github.com/iv-org/invidious/pull/4296
+[#4437]: https://github.com/iv-org/invidious/pull/4437
+[#4450]: https://github.com/iv-org/invidious/pull/4450
+[#4586]: https://github.com/iv-org/invidious/pull/4586
+[#4587]: https://github.com/iv-org/invidious/pull/4587
+[#4654]: https://github.com/iv-org/invidious/pull/4654
+[#4655]: https://github.com/iv-org/invidious/pull/4655
+[#4659]: https://github.com/iv-org/invidious/pull/4659
+[#4667]: https://github.com/iv-org/invidious/pull/4667
+[#4675]: https://github.com/iv-org/invidious/pull/4675
+[#4695]: https://github.com/iv-org/invidious/pull/4695
+[#4696]: https://github.com/iv-org/invidious/pull/4696
+[#4706]: https://github.com/iv-org/invidious/pull/4706
+[#4711]: https://github.com/iv-org/invidious/pull/4711
+[#4717]: https://github.com/iv-org/invidious/pull/4717
+[#4731]: https://github.com/iv-org/invidious/pull/4731
+[#4747]: https://github.com/iv-org/invidious/pull/4747
+[#4753]: https://github.com/iv-org/invidious/pull/4753
+[#4763]: https://github.com/iv-org/invidious/pull/4763
+[#4772]: https://github.com/iv-org/invidious/pull/4772
+[#4785]: https://github.com/iv-org/invidious/pull/4785
+[#4789]: https://github.com/iv-org/invidious/pull/4789
+[#4790]: https://github.com/iv-org/invidious/pull/4790
+[#4792]: https://github.com/iv-org/invidious/pull/4792
+[#4795]: https://github.com/iv-org/invidious/pull/4795
+[#4796]: https://github.com/iv-org/invidious/pull/4796
+[#4805]: https://github.com/iv-org/invidious/pull/4805
+[#4806]: https://github.com/iv-org/invidious/pull/4806
+[#4807]: https://github.com/iv-org/invidious/pull/4807
+[#4812]: https://github.com/iv-org/invidious/pull/4812
+[#4845]: https://github.com/iv-org/invidious/pull/4845
+[#4849]: https://github.com/iv-org/invidious/pull/4849
+[#4852]: https://github.com/iv-org/invidious/pull/4852
+[#4853]: https://github.com/iv-org/invidious/pull/4853
+[#4859]: https://github.com/iv-org/invidious/pull/4859
+[#4876]: https://github.com/iv-org/invidious/pull/4876
+
+
+## v2.20240427 (2024-04-27)
 
 Major bug fixes:
  * Videos: Use android test suite client (#4650, thanks @SamantazFox)

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);
 }
@@ -814,5 +816,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

@@ -218,6 +218,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

@@ -429,4 +429,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))?
 
@@ -197,6 +200,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

@@ -248,11 +248,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"
     )
 
@@ -394,6 +395,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
@@ -414,13 +441,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>