Add ability to mark videos as watched in subscription feed

assets/css/default.css

@@ -55,6 +55,19 @@ img.thumbnail {
   bottom: -0.5em;
 }
 
+.watched {
+  z-index: 100;
+  position: absolute;
+  background-color: rgba(35, 35, 35, 0.75);
+  color: #fff;
+  border-radius: 2px;
+  padding: 4px 8px 4px 8px;
+  font-size: 25px;
+  font-family: sans-serif;
+  left: 0.25em;
+  top: -0.75em;
+}
+
 /*
  * Navbar
  */

src/invidious.cr

@@ -246,12 +246,10 @@ get "/watch" do |env|
   user = env.get? "user"
   if user
     user = user.as(User)
-    if !user.watched.includes? id
-      PG_DB.exec("UPDATE users SET watched = watched || $1 WHERE id = $2", [id], user.id)
-    end
 
     preferences = user.preferences
     subscriptions = user.subscriptions
+    watched = user.watched
   end
   subscriptions ||= [] of String
 
@@ -268,6 +266,10 @@ get "/watch" do |env|
     next templated "error"
   end
 
+  if watched && !watched.includes? id
+    PG_DB.exec("UPDATE users SET watched = watched || $1 WHERE $2 = id", [id], user.as(User).id)
+  end
+
   if nojs
     if preferences
       source = preferences.comments[0]
@@ -963,7 +965,6 @@ end
 
 get "/preferences" do |env|
   user = env.get? "user"
-
   referer = get_referer(env)
 
   if user
@@ -976,7 +977,6 @@ end
 
 post "/preferences" do |env|
   user = env.get? "user"
-
   referer = get_referer(env)
 
   if user
@@ -1079,7 +1079,6 @@ end
 
 get "/toggle_theme" do |env|
   user = env.get? "user"
-
   referer = get_referer(env)
 
   if user
@@ -1098,13 +1097,66 @@ get "/toggle_theme" do |env|
   env.redirect referer
 end
 
+get "/mark_watched" do |env|
+  user = env.get? "user"
+  referer = get_referer(env, "/feed/subscriptions")
+
+  id = env.params.query["id"]?
+  if !id
+    halt env, status_code: 400
+  end
+
+  redirect = env.params.query["redirect"]?
+  redirect ||= "false"
+  redirect = redirect == "true"
+
+  if user
+    user = user.as(User)
+    if !user.watched.includes? id
+      PG_DB.exec("UPDATE users SET watched = watched || $1 WHERE $2 = id", [id], user.id)
+    end
+  end
+
+  if redirect
+    env.redirect referer
+  else
+    env.response.content_type = "application/json"
+    "{}"
+  end
+end
+
+get "/mark_unwatched" do |env|
+  user = env.get? "user"
+  referer = get_referer(env, "/feed/history")
+
+  id = env.params.query["id"]?
+  if !id
+    halt env, status_code: 400
+  end
+
+  redirect = env.params.query["redirect"]?
+  redirect ||= "false"
+  redirect = redirect == "true"
+
+  if user
+    user = user.as(User)
+    PG_DB.exec("UPDATE users SET watched = array_remove(watched, $1) WHERE id = $2", id, user.id)
+  end
+
+  if redirect
+    env.redirect referer
+  else
+    env.response.content_type = "application/json"
+    "{}"
+  end
+end
+
 # /modify_notifications
 # will "ding" all subscriptions.
 # /modify_notifications?receive_all_updates=false&receive_no_updates=false
 # will "unding" all subscriptions.
 get "/modify_notifications" do |env|
   user = env.get? "user"
-
   referer = get_referer(env)
 
   if user
@@ -1150,7 +1202,6 @@ end
 
 get "/subscription_manager" do |env|
   user = env.get? "user"
-
   referer = get_referer(env, "/")
 
   if !user
@@ -1235,7 +1286,6 @@ end
 
 get "/data_control" do |env|
   user = env.get? "user"
-
   referer = get_referer(env)
 
   if user
@@ -1249,7 +1299,6 @@ end
 
 post "/data_control" do |env|
   user = env.get? "user"
-
   referer = get_referer(env)
 
   if user
@@ -1385,7 +1434,6 @@ end
 
 get "/subscription_ajax" do |env|
   user = env.get? "user"
-
   referer = get_referer(env)
 
   if user
@@ -1547,6 +1595,7 @@ get "/feed/subscriptions" do |env|
   if user
     user = user.as(User)
     preferences = user.preferences
+    env.set "show_watched", true
 
     # Refresh account
     headers = HTTP::Headers.new
@@ -1670,19 +1719,28 @@ get "/feed/subscriptions" do |env|
   end
 end
 
-# get "/feed/history" do |env|
-#   user = env.get? "user"
-#   referer = get_referer(env)
+get "/feed/history" do |env|
+  user = env.get? "user"
+  referer = get_referer(env)
 
-#   if user
-#     user = user.as(User)
-#     watched = user.watched.reverse
+  page = env.params.query["page"]?.try &.to_i?
+  page ||= 1
 
-#     templated "history"
-#   else
-#     env.redirect referer
-#   end
-# end
+  if user
+    user = user.as(User)
+
+    limit = user.preferences.max_results
+    if user.watched[(page - 1)*limit]?
+      watched = user.watched.reverse[(page - 1)*limit, limit]
+    else
+      watched = [] of String
+    end
+
+    templated "history"
+  else
+    env.redirect referer
+  end
+end
 
 get "/feed/channel/:ucid" do |env|
   env.response.content_type = "text/xml"

src/invidious/comments.cr

@@ -507,7 +507,7 @@ def content_to_comment_html(content)
         length_seconds = watch_endpoint["startTimeSeconds"].as_i
         video_id = watch_endpoint["videoId"].as_s
 
-        text = %(<a href="javascript:void();" onclick="player.currentTime(#{length_seconds})">#{text}</a>)
+        text = %(<a href="javascript:void(0)" onclick="player.currentTime(#{length_seconds})">#{text}</a>)
       elsif url = run["navigationEndpoint"]["commandMetadata"]?.try &.["webCommandMetadata"]["url"].as_s
         text = %(<a href="#{url}">#{text}</a>)
       end

src/invidious/views/channel.ecr

@@ -90,7 +90,7 @@
 </div>
 
 <script>
-document.getElementById("subscribe")["href"] = "javascript:void(0);"
+document.getElementById("subscribe")["href"] = "javascript:void(0)"
 
 function subscribe() {
     var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";

src/invidious/views/components/item.ecr

@@ -74,6 +74,21 @@
             <% else %>
             <div class="thumbnail">
                 <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
+                <% if env.get? "show_watched" %>
+                <p class="watched">
+                    <a onclick="mark_watched(this)"
+                        data-id="<%= item.id %>"
+                        onmouseenter='this["href"]="javascript:void(0)"'
+                        href="/mark_watched?id=<%= item.id %>"'
+                    >
+                        <i onmouseenter='this.setAttribute("class", "icon ion-ios-eye-off")'
+                            onmouseleave='this.setAttribute("class", "icon ion-ios-eye")'
+                            class="icon ion-ios-eye"
+                        >
+                        </i>
+                    </a>
+                </p>
+                <% end %>
                 <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
             </div>
             <% end %>

src/invidious/views/history.ecr

@@ -0,0 +1,73 @@
+<% content_for "header" do %>
+<title>History - Invidious</title>
+<% end %>
+
+<div class="pure-g">
+<% watched.each_slice(4) do |slice| %>
+        <% slice.each do |item| %>
+        <div class="pure-u-1 pure-u-md-1-4">
+            <div class="h-box">
+                <a style="width:100%;" href="/watch?v=<%= item %>">
+                    <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
+                    <% else %>
+                    <div class="thumbnail">
+                        <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
+                        <p class="watched">
+                            <a onclick="mark_unwatched(this)"
+                                data-id="<%= item %>"
+                                onmouseenter='this["href"]="javascript:void(0)"'
+                                href="/mark_unwatched?id=<%= item %>"'
+                            >
+                                <i onmouseenter='this.setAttribute("class", "icon ion-ios-eye")'
+                                    onmouseleave='this.setAttribute("class", "icon ion-ios-eye-off")'
+                                    class="icon ion-ios-eye-off"
+                                >
+                                </i>
+                            </a>
+                        </p>
+                    </div>
+                    <p></p>
+                    <% end %>
+                </a>
+            </div>
+        </div>
+        <% end %>
+<% end %>
+</div>
+
+<script>
+function mark_unwatched(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = "none";
+
+    var url = "/mark_unwatched?redirect=false&id=" + target.getAttribute("data-id");
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.setRequestHeader("Redirect", "false");
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status != 200) {
+                tile.style.display = "";
+            }
+        }
+    }
+}
+</script>
+
+<div class="pure-g h-box">
+    <div class="pure-u-1 pure-u-md-1-5">
+    <% if page >= 2 %>
+        <a href="/feed/history?page=<%= page - 1 %>">Previous page</a>
+    <% end %>
+    </div>
+    <div class="pure-u-1 pure-u-md-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <% if watched.size >= limit %>
+        <a href="/feed/history?page=<%= page + 1 %>">Next page</a>
+    <% end %>
+    </div>
+</div>

src/invidious/views/subscriptions.ecr

@@ -43,6 +43,28 @@
 <% end %>
 </div>
 
+<script>
+function mark_watched(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = "none";
+
+    var url = "/mark_watched?redirect=false&id=" + target.getAttribute("data-id");
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "json";
+    xhr.timeout = 20000;
+    xhr.open("GET", url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status != 200) {
+                tile.style.display = "";
+            }
+        }
+    }
+}
+</script>
+
 <div class="pure-g">
     <div class="pure-u-1 pure-u-md-1-5">
     <% if page >= 2 %>

src/invidious/views/watch.ecr

@@ -225,7 +225,7 @@ function number_with_separator(val) {
 
 subscribe_button = document.getElementById("subscribe");
 if (subscribe_button.getAttribute('onclick')) {
-    subscribe_button["href"] = "javascript:void(0);";
+    subscribe_button["href"] = "javascript:void(0)";
 }
 
 function subscribe() {