Compilations feature

.gitignore

@@ -7,3 +7,4 @@
 /invidious
 /sentry
 /config/config.yml
+.DS_Store

assets/css/default.css

@@ -814,5 +814,67 @@ h1, h2, h3, h4, h5, p,
 }
 
 #download_widget {
-    width: 100%;
+  width: 100%;
+}  
+
+/*
+ * Compilations
+ */
+
+input.compilation-video-timestamp {
+  width: 50px;
+  height: 20px;
+}
+
+div.compilation-video-panel {
+  display:flex;
+  justify-content:flex-start; 
+  width:calc(100% - 20px); 
+  height:100px; 
+  border:2px solid #ccc;
+  margin: 10px; 
+  /*background: #d9d9d9;*/
+}
+
+div.compilation-order-swap-arrows {
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+}
+
+svg.compilation-video-swap-arrow {
+  border: solid black;
+  width:20px;
+  height:50%;
+  background-color: beige;
+  margin: 10px;
+}
+
+div.compilation-video-input-panel {
+  display:flex; 
+  flex-direction:column;
+  min-width: 0;
+  margin: 10px;
+}
+
+div.compilation-video-title {
+  display:flex; 
+  justify-content:flex-start;
+}
+
+span.compilation-video-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+div.compilation-video-timestamp-set {
+  display:flex; 
+  justify-content: flex-start;
+  align-items: center;
+}
+
+div.compilation-video-thumbnail {
+  position: relative;
+  box-sizing: border-box;
 }

assets/js/compilation_widget.js

@@ -0,0 +1,63 @@
+'use strict';
+var compilation_data = JSON.parse(document.getElementById('compilation_data').textContent);
+var payload = 'csrf_token=' + compilation_data.csrf_token;
+
+function add_compilation_video(target) {
+    var select = target.parentNode.children[0].children[1];
+    var option = select.children[select.selectedIndex];
+
+    var url = '/compilation_ajax?action_add_video=1&redirect=false' +
+        '&video_id=' + target.getAttribute('data-id') +
+        '&compilation_id=' + option.getAttribute('data-compid');
+
+    helpers.xhr('POST', url, {payload: payload}, {
+        on200: function (response) {
+            option.textContent = '✓' + option.textContent;
+        }
+    });
+}
+
+function add_compilation_item(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = 'none';
+
+    var url = '/compilation_ajax?action_add_video=1&redirect=false' +
+        '&video_id=' + target.getAttribute('data-id') +
+        '&compilation_id=' + target.getAttribute('data-compid');
+
+    helpers.xhr('POST', url, {payload: payload}, {
+        onNon200: function (xhr) {
+            tile.style.display = '';
+        }
+    });
+}
+
+function remove_compilation_item(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = 'none';
+
+    var url = '/compilation_ajax?action_remove_video=1&redirect=false' +
+        '&set_video_id=' + target.getAttribute('data-index') +
+        '&compilation_id=' + target.getAttribute('data-compid');
+
+    helpers.xhr('POST', url, {payload: payload}, {
+        onNon200: function (xhr) {
+            tile.style.display = '';
+        }
+    });
+}
+
+function move_compilation_video_before(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = 'none';
+
+    var url = '/compilation_ajax?action_move_video_before=1&redirect=false' +
+        '&set_video_id=' + target.getAttribute('data-index') +
+        '&compilation_id=' + target.getAttribute('data-compid');
+
+    helpers.xhr('POST', url, {payload: payload}, {
+        onNon200: function (xhr) {
+            tile.style.display = '';
+        }
+    });
+}

assets/js/embed.js

@@ -1,6 +1,39 @@
 'use strict';
 var video_data = JSON.parse(document.getElementById('video_data').textContent);
 
+function get_compilation(compid) {
+    var compid_url;
+    compid_url = '/api/v1/compilations/' + compid +
+    '?index=' + video_data.index +
+    '&continuation' + video_data.id +
+    '&format=html&hl=' + video_data.preferences.locale;
+
+    helpers.xhr('GET', compid_url, {retries: 5, entity_name: 'compilation'}, {
+        on200: function (response) {
+            if (!response.nextVideo)
+                return;
+
+            player.on('ended', function () {
+                var url = new URL('https://example.com/embed/' + response.nextVideo);
+
+                url.searchParams.set('comp', compid);
+                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');
+                if (video_data.params.listen !== video_data.preferences.listen)
+                    url.searchParams.set('listen', video_data.params.listen);
+                if (video_data.params.speed !== video_data.preferences.speed)
+                    url.searchParams.set('speed', video_data.params.speed);
+                if (video_data.params.local !== video_data.preferences.local)
+                    url.searchParams.set('local', video_data.params.local);
+
+                location.assign(url.pathname + url.search);
+            });
+        }
+    });   
+}
+
 function get_playlist(plid) {
     var plid_url;
     if (plid.startsWith('RD')) {
@@ -43,6 +76,8 @@ function get_playlist(plid) {
 addEventListener('load', function (e) {
     if (video_data.plid) {
         get_playlist(video_data.plid);
+    } else if (video_data.compid) {
+        get_compilation(video_data.compid)
     } else if (video_data.video_series) {
         player.on('ended', function () {
             var url = new URL('https://example.com/embed/' + video_data.video_series.shift());

assets/js/handlers.js

@@ -60,12 +60,21 @@
     document.querySelectorAll('[data-onclick="add_playlist_video"]').forEach(function (el) {
         el.onclick = function () { add_playlist_video(el); };
     });
+    document.querySelectorAll('[data-onclick="add_compilation_video"]').forEach(function (el) {
+        el.onclick = function () { add_compilation_video(el); };
+    });
     document.querySelectorAll('[data-onclick="add_playlist_item"]').forEach(function (el) {
         el.onclick = function () { add_playlist_item(el); };
     });
+    document.querySelectorAll('[data-onclick="add_compilation_item"]').forEach(function (el) {
+        el.onclick = function () { add_compilation_item(el); };
+    });
     document.querySelectorAll('[data-onclick="remove_playlist_item"]').forEach(function (el) {
         el.onclick = function () { remove_playlist_item(el); };
     });
+    document.querySelectorAll('[data-onclick="remove_compilation_item"]').forEach(function (el) {
+        el.onclick = function () { remove_compilation_item(el); };
+    });
     document.querySelectorAll('[data-onclick="revoke_token"]').forEach(function (el) {
         el.onclick = function () { revoke_token(el); };
     });

assets/js/player.js

@@ -255,8 +255,13 @@ if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
 
     player.markers({
         onMarkerReached: function (marker) {
-            if (marker.text === 'End')
-                player.loop() ? player.markers.prev('Start') : player.pause();
+            if (marker.text === 'End') {
+                if (video_data.ending_timestamp_seconds) {
+                    player.currentTime(player.duration());
+                } else {
+                    player.loop() ? player.markers.prev('Start') : player.pause();
+                }
+            }
         },
         markers: markers
     });

assets/js/watch.js

@@ -50,6 +50,59 @@ function continue_autoplay(event) {
     }
 }
 
+function get_compilation(compid) {
+    var compilation = document.getElementById('compilation');
+
+    compilation.innerHTML = spinnerHTMLwithHR;
+
+    var compid_url;
+    compid_url = '/api/v1/compilations/' + compid +
+        '?index=' + video_data.index +
+        '&continuation=' + video_data.id +
+        '&format=html&hl=' + video_data.preferences.locale; 
+
+    helpers.xhr('GET', compid_url, {retries: 5, entity_name: 'compilation'}, {
+        on200: function (response) {
+            compilation.innerHTML = response.compilationHtml;
+
+            if (!response.nextVideo) return;
+
+            var nextVideo = document.getElementById(response.nextVideo);
+            nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
+
+            player.on('ended', function () {
+                var url = new URL('https://example.com/watch?v=' + response.nextVideo);
+
+                url.searchParams.set('comp', compid);
+                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');
+                if (video_data.params.listen !== video_data.preferences.listen)
+                    url.searchParams.set('listen', video_data.params.listen);
+                if (video_data.params.speed !== video_data.preferences.speed)
+                    url.searchParams.set('speed', video_data.params.speed);
+                if (video_data.params.local !== video_data.preferences.local)
+                    url.searchParams.set('local', video_data.params.local);
+                url.searchParams.set('t',video_data.starting_timestamp_seconds);    
+                url.searchParams.set('end',video_data.ending_timestamp_seconds);   
+
+                location.assign(url.pathname + url.search);
+            });
+        },
+        onNon200: function (xhr) {
+            compilation.innerHTML = '';
+            document.getElementById('continue').style.display = '';
+        },
+        onError: function (xhr) {
+            compilation.innerHTML = spinnerHTMLwithHR;
+        },
+        onTimeout: function (xhr) {
+            compilation.innerHTML = spinnerHTMLwithHR;
+        }
+    });
+}
+
 function get_playlist(plid) {
     var playlist = document.getElementById('playlist');
 
@@ -177,7 +230,8 @@ if (video_data.play_next) {
 addEventListener('load', function (e) {
     if (video_data.plid)
         get_playlist(video_data.plid);
-
+    if (video_data.compid)
+        get_compilation(video_data.compid);
     if (video_data.params.comments[0] === 'youtube') {
         get_youtube_comments();
     } else if (video_data.params.comments[0] === 'reddit') {

config/config.example.yml

@@ -485,6 +485,14 @@ hmac_key: "CHANGE_ME!!"
 ##
 #playlist_length_limit: 500
 
+##
+## Maximum custom compilation length limit.
+##
+## Accepted values: Integer
+## Default: 500
+##
+#compilation_length_limit: 500
+
 #########################################
 #
 #  Default user preferences

config/sql/compilation_videos.sql

@@ -0,0 +1,21 @@
+-- Table: public.compilation_videos
+
+-- DROP TABLE public.compilation_videos;
+
+CREATE TABLE IF NOT EXISTS public.compilation_videos
+(
+    title text,
+    id text,
+    author text,
+    ucid text,
+    length_seconds integer,
+    starting_timestamp_seconds integer,
+    ending_timestamp_seconds integer,
+    published timestamptz,
+    compid text references compilations(id),
+    index int8,
+    order_index integer,
+    PRIMARY KEY (index,compid)
+);
+
+GRANT ALL ON TABLE public.compilation_videos TO current_user;

config/sql/compilations.sql

@@ -0,0 +1,31 @@
+-- Type: public.compilation_privacy
+
+-- DROP TYPE public.compilation_privacy;
+
+CREATE TYPE public.compilation_privacy AS ENUM
+(
+    'Unlisted',
+    'Private'
+);
+
+-- Table: public.compilations
+
+-- DROP TABLE public.compilations;
+
+CREATE TABLE IF NOT EXISTS public.compilations
+(
+    title text,
+    id text primary key,
+    author text,
+    description text,
+    video_count integer,
+    created timestamptz,
+    updated timestamptz,
+    privacy compilation_privacy,
+    index int8[],
+    first_video_id text,
+    first_video_starting_timestamp_seconds integer,
+    first_video_ending_timestamp_seconds integer
+);
+
+GRANT ALL ON public.compilations TO current_user;

docker/init-invidious-db.sh

@@ -10,3 +10,5 @@ psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/nonces.sql
 psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/annotations.sql
 psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/playlists.sql
 psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/playlist_videos.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/compilations.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/compilation_videos.sql