Support adding video to playlist from watch page

7 files changed, 57 insertions, 9 deletions

diff --git a/assets/js/handlers.js b/assets/js/handlers.js
index 7ecb5a02..b3da8d9b 100644
--- a/assets/js/handlers.js
+++ b/assets/js/handlers.js
@@ -55,6 +55,9 @@
     n2a(document.querySelectorAll('[data-onclick="mark_unwatched"]')).forEach(function (e) {
         e.onclick = function () { mark_unwatched(e); };
     });
+    n2a(document.querySelectorAll('[data-onclick="add_playlist_video"]')).forEach(function (e) {
+        e.onclick = function () { add_playlist_video(e); };
+    });
     n2a(document.querySelectorAll('[data-onclick="add_playlist_item"]')).forEach(function (e) {
         e.onclick = function () { add_playlist_item(e); };
     });
diff --git a/assets/js/playlist_widget.js b/assets/js/playlist_widget.js
index a29d7ef0..0ec27859 100644
--- a/assets/js/playlist_widget.js
+++ b/assets/js/playlist_widget.js
@@ -1,5 +1,29 @@
 var playlist_data = JSON.parse(document.getElementById('playlist_data').innerHTML);
 
+function add_playlist_video(target) {
+    var select = target.parentNode.children[0].children[1];
+    var option = select.children[select.selectedIndex];
+
+    var url = '/playlist_ajax?action_add_video=1&redirect=false' +
+        '&video_id=' + target.getAttribute('data-id') +
+        '&playlist_id=' + option.getAttribute('data-plid');
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 10000;
+    xhr.open('POST', url, true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                option.innerText = '✓' + option.innerText;
+            }
+        }
+    }
+
+    xhr.send('csrf_token=' + playlist_data.csrf_token);
+}
+
 function add_playlist_item(target) {
     var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
     tile.style.display = 'none';
diff --git a/src/invidious.cr b/src/invidious.cr
index 74d0c79f..1448c502 100644
--- a/src/invidious.cr
+++ b/src/invidious.cr
@@ -3131,9 +3131,7 @@ get "/feed/channel/:ucid" do |env|
   rss = YT_POOL.client &.get("/feeds/videos.xml?channel_id=#{channel.ucid}").body
   rss = XML.parse_html(rss)
 
-  videos = [] of SearchVideo
-
-  rss.xpath_nodes("//feed/entry").each do |entry|
+  videos = rss.xpath_nodes("//feed/entry").map do |entry|
     video_id = entry.xpath_node("videoid").not_nil!.content
     title = entry.xpath_node("title").not_nil!.content
 
@@ -3145,7 +3143,7 @@ get "/feed/channel/:ucid" do |env|
     description_html = entry.xpath_node("group/description").not_nil!.to_s
     views = entry.xpath_node("group/community/statistics").not_nil!.["views"].to_i64
 
-    videos << SearchVideo.new(
+    SearchVideo.new(
       title: title,
       id: video_id,
       author: author,
diff --git a/src/invidious/helpers/helpers.cr b/src/invidious/helpers/helpers.cr
index 2341d3be..e168c55e 100644
--- a/src/invidious/helpers/helpers.cr
+++ b/src/invidious/helpers/helpers.cr
@@ -732,9 +732,7 @@ def cache_annotation(db, id, annotations)
   body = XML.parse(annotations)
   nodeset = body.xpath_nodes(%q(/document/annotations/annotation))
 
-  if nodeset == 0
-    return
-  end
+  return if nodeset == 0
 
   has_legacy_annotations = false
   nodeset.each do |node|
diff --git a/src/invidious/views/add_playlist_items.ecr b/src/invidious/views/add_playlist_items.ecr
index 07295c1a..09eacbc8 100644
--- a/src/invidious/views/add_playlist_items.ecr
+++ b/src/invidious/views/add_playlist_items.ecr
@@ -27,7 +27,7 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/playlist_widget.js"></script>
+<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
 
 <div class="pure-g">
     <% videos.each_slice(4) do |slice| %>
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr
index ccda94d9..7316af14 100644
--- a/src/invidious/views/playlist.ecr
+++ b/src/invidious/views/playlist.ecr
@@ -76,7 +76,7 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/playlist_widget.js"></script>
+<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
 <% end %>
 
 <div class="pure-g">
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 2a99dd5b..e43282cb 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -101,6 +101,31 @@
                 <% end %>
             </p>
 
+            <% if user %>
+                <form data-onsubmit="return_false" class="pure-form pure-form-stacked" action="/playlist_ajax" method="post">
+                    <div class="pure-control-group">
+                        <label for="playlist_id"><%= translate(locale, "Add to playlist: ") %></label>
+                        <select style="width:100%" name="playlist_id" id="playlist_id">
+                            <% PG_DB.query_all("SELECT id,title FROM playlists WHERE author = $1", user.email, as: {String, String}).each do |plid, title| %>
+                            <option data-plid="<%= plid %>" value="<%= plid %>"><%= title %></option>
+                            <% end %>
+                        </select>
+                    </div>
+
+                    <button data-onclick="add_playlist_video" data-id="<%= video.id %>" type="submit" class="pure-button pure-button-primary">
+                        <b><%= translate(locale, "Add to playlist") %></b>
+                    </button>
+                </form>
+                <script id="playlist_data" type="application/json">
+                <%=
+                {
+                    "csrf_token" => URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "")
+                }.to_pretty_json
+                %>
+                </script>
+                <script src="/js/playlist_widget.js?v=<%= Time.utc.to_unix_ms %>"></script>
+            <% end %>
+
             <% if CONFIG.dmca_content.includes?(video.id) || CONFIG.disabled?("downloads") %>
                 <p><%= translate(locale, "Download is disabled.") %></p>
             <% else %>