Add video previews

assets/css/videojs-vtt-thumbnails.css

@@ -0,0 +1,7 @@
+/**
+ * videojs-vtt-thumbnails
+ * @version 0.0.13
+ * @copyright 2019 Chris Boustead <chris@forgemotion.com>
+ * @license MIT
+ */
+.video-js.vjs-vtt-thumbnails{display:block}.video-js .vjs-vtt-thumbnail-display{position:absolute;transition:transform .1s, opacity .2s;bottom:85%;pointer-events:none;box-shadow:0 0 7px rgba(0,0,0,0.6)}

src/invidious.cr

@@ -3053,6 +3053,86 @@ get "/api/v1/stats" do |env|
   statistics.to_json
 end
 
+# YouTube provides "storyboards", which are sprites containing of x * y
+# preview thumbnails for individual scenes in a video.
+# See https://support.jwplayer.com/articles/how-to-add-preview-thumbnails
+get "/api/v1/storyboards/:id" do |env|
+  locale = LOCALES[env.get("preferences").as(Preferences).locale]?
+
+  env.response.content_type = "application/json"
+
+  id = env.params.url["id"]
+  region = env.params.query["region"]?
+
+  client = make_client(YT_URL)
+  begin
+    video = get_video(id, PG_DB, proxies, region: region)
+  rescue ex : VideoRedirect
+    next env.redirect "/api/v1/storyboards/#{ex.message}"
+  rescue ex
+    env.response.status_code = 500
+    next
+  end
+
+  storyboards = video.storyboards
+
+  width = env.params.query["width"]?
+  height = env.params.query["height"]?
+
+  if !width && !height
+    response = JSON.build do |json|
+      json.object do
+        json.field "storyboards" do
+          generate_storyboards(json, id, storyboards, config, Kemal.config)
+        end
+      end
+    end
+
+    next response
+  end
+
+  env.response.content_type = "text/vtt"
+
+  storyboard = storyboards.select { |storyboard| width == "#{storyboard[:width]}" || height == "#{storyboard[:height]}" }
+
+  if storyboard.empty?
+    env.response.status_code = 404
+    next
+  else
+    storyboard = storyboard[0]
+  end
+
+  webvtt = <<-END_VTT
+  WEBVTT
+
+
+  END_VTT
+
+  start_time = 0.milliseconds
+  end_time = storyboard[:interval].milliseconds
+
+  storyboard[:storyboard_count].times do |i|
+    host_url = make_host_url(config, Kemal.config)
+    url = storyboard[:url].gsub("$M", i).gsub("https://i9.ytimg.com", host_url)
+
+    storyboard[:storyboard_height].times do |j|
+      storyboard[:storyboard_width].times do |k|
+        webvtt += <<-END_CUE
+        #{start_time}.000 --> #{end_time}.000
+        #{url}#xywh=#{storyboard[:width] * k},#{storyboard[:height] * j},#{storyboard[:width]},#{storyboard[:height]}
+
+
+        END_CUE
+
+        start_time += storyboard[:interval].milliseconds
+        end_time += storyboard[:interval].milliseconds
+      end
+    end
+  end
+
+  webvtt
+end
+
 get "/api/v1/captions/:id" do |env|
   locale = LOCALES[env.get("preferences").as(Preferences).locale]?
 
@@ -3145,7 +3225,7 @@ get "/api/v1/captions/:id" do |env|
       text = "<v #{md["name"]}>#{md["text"]}</v>"
     end
 
-    webvtt = webvtt + <<-END_CUE
+    webvtt += <<-END_CUE
     #{start_time} --> #{end_time}
     #{text}
 
@@ -5054,6 +5134,13 @@ get "/ggpht/*" do |env|
   end
 end
 
+options "/sb/:id/:storyboard/:index" do |env|
+  env.response.headers.delete("Content-Type")
+  env.response.headers["Access-Control-Allow-Origin"] = "*"
+  env.response.headers["Access-Control-Allow-Methods"] = "GET, OPTIONS"
+  env.response.headers["Access-Control-Allow-Headers"] = "Content-Type, Range"
+end
+
 get "/sb/:id/:storyboard/:index" do |env|
   id = env.params.url["id"]
   storyboard = env.params.url["storyboard"]

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>