Add speed control

src/invidious.cr

@@ -124,6 +124,9 @@ end
 get "/watch" do |env|
   id = env.params.query["v"]
   listen = env.params.query["listen"]? || "false"
+  speed = env.params.query["speed"]? && env.params.query["speed"].to_f? ? env.params.query["speed"].to_f : 1
+
+  env.params.query.delete_all("listen")
 
   begin
     video = get_video(id)
@@ -172,7 +175,6 @@ end
 get "/search" do |env|
   query = env.params.query["q"]
   page = env.params.query["page"]? && env.params.query["page"].to_i? ? env.params.query["page"].to_i : 1
-  speed = env.params.query["speed"]? && env.params.query["speed"].to_i? ? env.params.query["speed"].to_i : 1
 
   client = get_client
 

src/views/watch.ecr

@@ -2,7 +2,22 @@
 <%= video.info["title"] + " - " %>
 <% end %>
 
-<video style="width: 100%" poster="<%= player_response["videoDetails"]["thumbnail"]["thumbnails"][-1]["url"] %>" controls>
+<script>
+function setRate(rate) {
+    var video = document.getElementById("player")
+    video.playbackRate = rate;
+};
+function toggle() {
+    var video = document.getElementById("player")
+    if (video.paused == true) {
+        video.play();
+    } else {
+        video.pause();
+    };
+};
+</script>
+
+<video id="player" onclick="toggle()" onplay="setRate(<%= speed %>)" style="width: 100%" poster="<%= player_response["videoDetails"]["thumbnail"]["thumbnails"][-1]["url"] %>" controls>
     <% if listen == "true" %>
         <% adaptive_fmts.each do |fmt| %>
             <% url = fmt["url"] %>
@@ -17,18 +32,20 @@
         <% end %>
     <% end %>
     </video>
+
     <h1>
         <%= video.info["title"] %> 
         <% if listen == "true" %>
-        <a class="link" href="/watch?v=<%= id %>">
+    <a class="link" href="/watch?<%= env.params.query %>">
             <i class="fa fa-video-camera" aria-hidden="true"></i>
         </a>
         <% else %>
-        <a class="link" href="/watch?v=<%= id %>&listen=true">
+    <a class="link" href="/watch?<%= env.params.query %>&listen=true">
             <i class="fa fa-volume-up" aria-hidden="true"></i>
         </a>
         <% end %>
     </h1>
+
     <div class="pure-g">
         <div class="pure-u-1 pure-u-md-1-5">
             <p><i class="fa fa-eye" aria-hidden="true"></i> <%= views %></p>
@@ -38,16 +55,12 @@
             <p id="Rating">Rating : <%= rating.round(4) %> / 5</p>
             <p id="Engagement">Engagement : <%= engagement.round(2) %>%</p>
         </div>
+
         <div class="pure-u-1 pure-u-md-3-5">
             <p><a class="link" href="https://youtube.com/channel/<%= video.info["ucid"] %>"><%= video.info["author"] %></a></p>
             <p id="Description"><%= description %></p>
-            <% rvs.each do |rv| %>
-            <% rv.each do |value| %>
-            <p style="word-break: break-all"><%= value[0] %> => <%= value[1] %></p>
-            <% end %>
-            <br>
-            <% end %>
         </div>
+
         <div class="pure-u-1 pure-u-md-1-5">
         <% rvs.each do |rv| %>
         <% if rv.has_key?("id") %>
@@ -56,4 +69,3 @@
         <% end %>
         </div>
     </div>
-</div>