Add video previews

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>