Add video previews

src/invidious/videos.cr

@@ -281,7 +281,7 @@ struct Video
           generate_thumbnails(json, self.id, config, kemal_config)
         end
         json.field "storyboards" do
-          generate_storyboards(json, self.storyboards, config, kemal_config)
+          generate_storyboards(json, self.id, self.storyboards, config, kemal_config)
         end
 
         description_html, description = html_to_content(self.description)
@@ -1348,11 +1348,12 @@ def generate_thumbnails(json, id, config, kemal_config)
   end
 end
 
-def generate_storyboards(json, storyboards, config, kemal_config)
+def generate_storyboards(json, id, storyboards, config, kemal_config)
   json.array do
     storyboards.each do |storyboard|
       json.object do
-        json.field "url", storyboard[:url]
+        json.field "url", "/api/v1/storyboards/#{id}?width=#{storyboard[:width]}&height=#{storyboard[:height]}"
+        json.field "templateUrl", storyboard[:url]
         json.field "width", storyboard[:width]
         json.field "height", storyboard[:height]
         json.field "count", storyboard[:count]

src/invidious/views/components/player.ecr

@@ -217,6 +217,10 @@ if (bpb) {
 player.httpSourceSelector();
 <% end %>
 
+player.vttThumbnails({
+    src: 'api/v1/storyboards/<%= video.id %>?height=90'
+});
+
 <% if !params.listen && params.annotations %>
 var video_container = document.getElementById('player');
 let xhr = new XMLHttpRequest();

src/invidious/views/components/player_sources.ecr

@@ -2,12 +2,14 @@
 <link rel="stylesheet" href="/css/videojs-http-source-selector.css">
 <link rel="stylesheet" href="/css/videojs.markers.min.css">
 <link rel="stylesheet" href="/css/videojs-share.css">
+<link rel="stylesheet" href="/css/videojs-vtt-thumbnails.css">
 <script src="/js/video.min.js"></script>
 <script src="/js/videojs-contrib-quality-levels.min.js"></script>
 <script src="/js/videojs-http-source-selector.min.js"></script>
 <script src="/js/videojs.hotkeys.min.js"></script>
 <script src="/js/videojs-markers.min.js"></script>
 <script src="/js/videojs-share.min.js"></script>
+<script src="/js/videojs-vtt-thumbnails.min.js"></script>
 
 <% if params.annotations %>
     <link rel="stylesheet" href="/css/videojs-youtube-annotations.min.css">

src/invidious/views/licenses.ecr

@@ -93,6 +93,20 @@
             </td>
         </tr>
 
+        <tr>
+            <td>
+                <a href="/js/videojs-vtt-thumbnails.min.js">videojs-vtt-thumbnails.min.js</a>
+            </td>
+
+            <td>
+                <a href="http://www.jclark.com/xml/copying.txt">Expat</a>
+            </td>
+
+            <td>
+                <a href="https://github.com/chrisboustead/videojs-vtt-thumbnails"><%= translate(locale, "source") %></a>
+            </td>
+        </tr>
+
         <tr>
             <td>
                 <a href="/js/videojs-youtube-annotations.min.js">videojs-youtube-annotations.min.js</a>