Add video,js, Genesis 3:6

2 files changed, 55 insertions, 45 deletions

diff --git a/src/views/layout.ecr b/src/views/layout.ecr
index 8a2c26b3..e951ccc4 100644
--- a/src/views/layout.ecr
+++ b/src/views/layout.ecr
@@ -9,6 +9,11 @@
   <link rel="stylesheet" href="/css/grids-responsive-min.css">
   <link rel="stylesheet" href="/css/font-awesome.min.css">
   <link rel="stylesheet" href="/css/custom.css">
+  <link rel="stylesheet" href="/css/video-js.css">
+
+  <script src="/js/video.js"></script>
+  <script src="/js/videojs.hotkeys.min.js"></script>
+
   <title><%= yield_content "header" %>Invidious</title>
 </head>
 
diff --git a/src/views/watch.ecr b/src/views/watch.ecr
index f3763b56..8a16dbca 100644
--- a/src/views/watch.ecr
+++ b/src/views/watch.ecr
@@ -2,22 +2,7 @@
 <%= video.info["title"] + " - " %>
 <% end %>
 
-<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>
+<video id="player" class="video-js" data-setup="{}" style="width:100%" controls>
     <% if listen == "true" %>
         <% adaptive_fmts.each do |fmt| %>
             <% url = fmt["url"] %>
@@ -31,41 +16,61 @@ function toggle() {
         <source src="<%= fmt["url"] %>" type="<%= fmt["type"].split(";")[0] %>">
         <% end %>
     <% end %>
-    </video>
+</video>
+
+<script>
+var options = {
+    poster: "<%= player_response["videoDetails"]["thumbnail"]["thumbnails"][-1]["url"] %>",
+    aspectRatio: "16:9",
+    preload: "auto",
+    playbackRates: [0.5, 1, 1.5, 2]
+};
+var player = videojs('player', options, function() {
+    this.hotkeys({
+    volumeStep: 0.1,
+    seekStep: 5,
+    enableModifiersForNumbers: false
+  });
+});
+</script>
 
-    <h1>
-        <%= video.info["title"] %> 
-        <% if listen == "true" %>
+<h1>
+    <%= video.info["title"] %> 
+    <% if listen == "true" %>
     <a class="link" href="/watch?<%= env.params.query %>">
-            <i class="fa fa-video-camera" aria-hidden="true"></i>
-        </a>
-        <% else %>
+        <i class="fa fa-video-camera" aria-hidden="true"></i>
+    </a>
+    <% else %>
     <a class="link" href="/watch?<%= env.params.query %>&listen=true">
-            <i class="fa fa-volume-up" aria-hidden="true"></i>
-        </a>
-        <% end %>
-    </h1>
+        <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>
-            <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= likes %></p>
-            <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= dislikes %></p>
-            <p id="Wilson">Wilson Score : <%= ci_lower_bound(likes, likes + dislikes).round(4) %></p>
-            <p id="Rating">Rating : <%= rating.round(4) %> / 5</p>
-            <p id="Engagement">Engagement : <%= engagement.round(2) %>%</p>
-        </div>
+<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>
+        <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= likes %></p>
+        <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= dislikes %></p>
+        <p id="Wilson">Wilson Score : <%= ci_lower_bound(likes, likes + dislikes).round(4) %></p>
+        <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>
-        </div>
+    <div class="pure-u-1 pure-u-md-3-5">
+        <p>
+            <a class="link" href="https://youtube.com/channel/<%= video.info["ucid"] %>">
+                <h3><%= video.info["author"] %></h3>
+            </a>
+        </p>
+        <%= description %>
+    </div>
 
-        <div class="pure-u-1 pure-u-md-1-5">
-        <% rvs.each do |rv| %>
+    <div class="pure-u-1 pure-u-md-1-5">
+    <% rvs.each do |rv| %>
         <% if rv.has_key?("id") %>
-            <p><a class="link" href="/watch?v=<%= rv["id"] %>"><%= rv["title"] %></a></p>
+        <p><a class="link" href="/watch?v=<%= rv["id"] %>"><%= rv["title"] %></a></p>
         <% end %>
-        <% end %>
-        </div>
+    <% end %>
     </div>
+</div>