Use markers to implement timestamps

assets/js/player.js

@@ -200,12 +200,19 @@ if (!video_data.params.listen && video_data.vr && video_data.params.vr_mode) {
 // Add markers
 if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
     var markers = [{ time: video_data.params.video_start, text: 'Start' }];
+    if (video_data.starting_timestamp_seconds) {
+        markers = [{ time: video_data.starting_timestamp_seconds, text: 'Start' }];
+    }
 
+    if (!video_data.ending_timestamp_seconds) {
         if (video_data.params.video_end < 0) {
             markers.push({ time: video_data.length_seconds - 0.5, text: 'End' });
         } else {
             markers.push({ time: video_data.params.video_end, text: 'End' });
         }
+    } else {
+        markers.push({ time: video_data.ending_timestamp_seconds, text: 'End' });
+    }    
 
     player.markers({
         onMarkerReached: function (marker) {

assets/js/watch.js

@@ -103,7 +103,7 @@ function continue_autoplay(event) {
 }
 
 function get_compilation(compid) {
-    var compilation = document.getElementById('compilations');
+    var compilation = document.getElementById('compilation');
 
     compilation.innerHTML = spinnerHTMLwithHR;
 
@@ -113,6 +113,8 @@ function get_compilation(compid) {
         '&continuation=' + video_data.id +
         '&format=html&hl=' + video_data.preferences.locale;
 
+    console.log("Send "+compid_url);   
+
     helpers.xhr('GET', compid_url, {retries: 5, entity_name: 'compilation'}, {
         on200: function (response) {
             compilation.innerHTML = response.compilationHtml;
@@ -126,7 +128,7 @@ function get_compilation(compid) {
                 var url = new URL('https://example.com/watch?v=' + response.nextVideo);
         
                 url.searchParams.set('list', compid);
-                    if (!plid.startsWith('RD'))
+                if (!compid.startsWith('RD'))
                     url.searchParams.set('index', response.index);
                 if (video_data.params.autoplay || video_data.params.continue_autoplay)
                     url.searchParams.set('autoplay', '1');

src/invidious/database/compilations.cr

@@ -258,6 +258,18 @@ module Invidious::Database::CompilationVideos
     return PG_DB.query_all(request, compid, index, video_index, offset, limit, as: CompilationVideo)
   end
 
+  def select_timestamps(compid : String, vid : String)
+
+    request = <<-SQL
+      SELECT starting_timestamp_seconds,ending_timestamp_seconds FROM compilation_videos
+      WHERE compid = $1 AND id = $2
+      LIMIT 1
+    SQL
+
+    return PG_DB.query_one?(request, compid, vid, as: {Int32,Int32})
+
+  end
+
   def select_id_from_order_index(order_index : Int32)
     request = <<-SQL
       SELECT id FROM compilation_videos

src/invidious/routes/watch.cr

@@ -44,6 +44,13 @@ module Invidious::Routes::Watch
       continuation = process_continuation(env.params.query, plid, id)
     elsif env.params.query["list"]?.try &.starts_with? "IVCMP"   
       compid = env.params.query["list"]?.try &.gsub(/[^a-zA-Z0-9_-]/, "")
+      if (!compid.nil?)
+        timestamps = Invidious::Database::CompilationVideos.select_timestamps(compid, id)
+        if (!timestamps.nil?)
+          starting_timestamp_seconds=timestamps[0]
+          ending_timestamp_seconds=timestamps[1]
+        end
+      end  
       continuation = process_continuation(env.params.query, compid, id)
     end  
 

src/invidious/views/watch.ecr

@@ -51,6 +51,8 @@ we're going to need to do it here in order to allow for translations.
     "index" => continuation,
     "plid" => plid,
     "compid" => compid,
+    "starting_timestamp_seconds" => starting_timestamp_seconds,
+    "ending_timestamp_seconds" => ending_timestamp_seconds,
     "length_seconds" => video.length_seconds.to_f,
     "play_next" => !video.related_videos.empty? && !plid && params.continue,
     "next_video" => video.related_videos.select { |rv| rv["id"]? }[0]?.try &.["id"],
@@ -313,16 +315,18 @@ we're going to need to do it here in order to allow for translations.
         </div>
     </div>
 
-    <% if params.related_videos || plid %>
+    <% if params.related_videos || plid || compid%>
         <div class="pure-u-1 pure-u-lg-1-5">
             <% if plid %>
                 <div id="playlist" class="h-box"></div>
+            <% elsif compid %>
+                <div id="compilation" class="h-box"></div>
             <% end %>
 
             <% if params.related_videos %>
                 <div class="h-box">
                     <% if !video.related_videos.empty? %>
-                        <div <% if plid %>style="display:none"<% end %>>
+                        <div <% if plid || compid %>style="display:none"<% end %>>
                             <div class="pure-control-group">
                                 <label for="continue"><%= translate(locale, "preferences_continue_label") %></label>
                                 <input name="continue" id="continue" type="checkbox" <% if params.continue %>checked<% end %>>