Use markers to implement timestamps

assets/js/player.js

@@ -200,13 +200,20 @@ 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) {
-    if (video_data.params.video_end < 0) {
+        markers = [{ time: video_data.starting_timestamp_seconds, text: 'Start' }];
-        markers.push({ time: video_data.length_seconds - 0.5, text: 'End' });
-    } else {
-        markers.push({ time: video_data.params.video_end, text: 'End' });
     }
 
+    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) {
             if (marker.text === 'End')

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;
 
@@ -111,47 +111,49 @@ function get_compilation(compid) {
     compid_url = '/api/v1/compilations/' + compid +
         '?index=' + video_data.index +
         '&continuation=' + video_data.id +
-       '&format=html&hl=' + video_data.preferences.locale;
+        '&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;
     
-               if (!response.nextVideo) return;
+            if (!response.nextVideo) return;
         
-                var nextVideo = document.getElementById(response.nextVideo);
+            var nextVideo = document.getElementById(response.nextVideo);
-                nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
+            nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
         
-                player.on('ended', function () {
+            player.on('ended', function () {
-                    var url = new URL('https://example.com/watch?v=' + response.nextVideo);
+                var url = new URL('https://example.com/watch?v=' + response.nextVideo);
         
-                    url.searchParams.set('list', compid);
+                url.searchParams.set('list', compid);
-                    if (!plid.startsWith('RD'))
+                if (!compid.startsWith('RD'))
-                        url.searchParams.set('index', response.index);
+                    url.searchParams.set('index', response.index);
-                    if (video_data.params.autoplay || video_data.params.continue_autoplay)
+                if (video_data.params.autoplay || video_data.params.continue_autoplay)
-                        url.searchParams.set('autoplay', '1');
+                    url.searchParams.set('autoplay', '1');
-                    if (video_data.params.listen !== video_data.preferences.listen)
+                if (video_data.params.listen !== video_data.preferences.listen)
-                        url.searchParams.set('listen', video_data.params.listen);
+                    url.searchParams.set('listen', video_data.params.listen);
-                    if (video_data.params.speed !== video_data.preferences.speed)
+                if (video_data.params.speed !== video_data.preferences.speed)
-                        url.searchParams.set('speed', video_data.params.speed);
+                    url.searchParams.set('speed', video_data.params.speed);
-                    if (video_data.params.local !== video_data.preferences.local)
+                if (video_data.params.local !== video_data.preferences.local)
-                        url.searchParams.set('local', video_data.params.local);
+                    url.searchParams.set('local', video_data.params.local);
         
-                    location.assign(url.pathname + url.search);
+                location.assign(url.pathname + url.search);
-                });
+            });
-            },
+        },
-            onNon200: function (xhr) {
+        onNon200: function (xhr) {
-                compilation.innerHTML = '';
+            compilation.innerHTML = '';
-                document.getElementById('continue').style.display = '';
+            document.getElementById('continue').style.display = '';
-            },
+        },
-            onError: function (xhr) {
+        onError: function (xhr) {
-                compilation.innerHTML = spinnerHTMLwithHR;
+            compilation.innerHTML = spinnerHTMLwithHR;
-            },
+        },
-            onTimeout: function (xhr) {
+        onTimeout: function (xhr) {
-                compilation.innerHTML = spinnerHTMLwithHR;
+            compilation.innerHTML = spinnerHTMLwithHR;
-            }
+        }
-        });
+    });
-    }
+}
 
 function get_playlist(plid) {
     var playlist = document.getElementById('playlist');

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 %>>