Enable swap arrows to rearrange order of videos

src/invidious/database/compilations.cr

@@ -80,6 +80,16 @@ module Invidious::Database::Compilations
     PG_DB.exec(request, index, id)
   end
 
+  def move_video_before(id : String, index : Array(Int64))
+    request = <<-SQL
+      UPDATE compilations
+      SET index = $2
+      WHERE id = $1
+    SQL
+
+    PG_DB.exec(request, id, index)
+  end 
+
   # -------------------
   #  Select
   # -------------------
@@ -217,6 +227,18 @@ module Invidious::Database::CompilationVideos
     return PG_DB.query_all(request, compid, index, limit, offset, as: CompilationVideo)
   end
 
+  def select_video(compid : String, index : VideoIndex, video_index, offset, limit = 100) : Array(CompilationVideo)
+    request = <<-SQL
+      SELECT * FROM compilation_videos
+      WHERE compid = $1 AND index = $3
+      ORDER BY array_position($2, index)
+      LIMIT $5
+      OFFSET $4
+    SQL
+
+    return PG_DB.query_all(request, compid, index, video_index, offset, limit, as: CompilationVideo)
+  end
+
   def select_id_from_order_index(order_index : Int32)
     request = <<-SQL
       SELECT id FROM compilation_videos

src/invidious/routes/compilations.cr

@@ -451,6 +451,28 @@ module Invidious::Routes::Compilations
       Invidious::Database::Compilations.update_video_removed(compilation_id, index)
     when "action_move_video_before"
       # TODO: Compilation stub
+      #video_index = compilation.index
+      video_index = env.params.query["video_index"]
+      begin
+        #video_index = get_video(video_index)
+        compilation_video = Invidious::Database::CompilationVideos.select_video(compilation_id, compilation.index, video_index, 0, 1)
+        compilation_index_array = compilation.index
+      rescue ex : NotFoundException
+        return error_json(404, ex)
+      rescue ex
+        if redirect
+          return error_template(500, ex)
+        else
+          return error_json(500, ex)
+        end
+      end
+      compilation_index_array_position = compilation_index_array.index(compilation_video[0].index)
+      LOGGER.info("for #{compilation_index_array}, the item #{compilation_video[0].index} is a position #{compilation_index_array.index(compilation_video[0].index)}")
+      if !compilation_index_array_position.nil?
+        compilation_index_array.delete_at(compilation_index_array_position)
+        compilation_index_array.insert(compilation_index_array_position-1,compilation_video[0].index)
+        Invidious::Database::Compilations.move_video_before(compilation_id, compilation_index_array)
+      end
     else
       return error_json(400, "Unsupported action #{action}")
     end

src/invidious/views/components/compilation_video.ecr

@@ -2,14 +2,10 @@
     <div class="h-box">
         <div class="compilation-video-panel">
             <div class="compilation-order-swap-arrows">
-                <%- form_parameters = "action_move_video_before=1&set_video_id=#{compilation_video.index}&compilation_id=#{compilation_video.compid}&referer=#{env.get("current_page")}" -%>
-                <form data-onsubmit="return_false" action="/compilation_ajax?<%= form_parameters %>" method="post">
+                <%- form_parameters = "action_move_video_before=1&video_index=#{compilation_video.index}&compilation_id=#{compilation_video.compid}" -%>
+                <form action="/compilation_ajax?<%= form_parameters %>" method="post">
                     <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
-                    <button type="submit" style="margin:10px" class="pure-button pure-button-secondary low-profile"
-                                    data-onclick="move_compilation_video_before" data-index="<%= compilation_video.index %>" data-compid="<%= compilation_video.compid %>">
-                        <!-- <svg class="compilation-video-swap-arrow">
-                            <path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
-                        </svg> -->
+                    <button type="submit" style="margin:10px" class="pure-button pure-button-secondary low-profile">
                         <i class="icon ion-md-arrow-up"></i>
                     </button>
                 </form>