Merge pull request #9 from omarroth/add-preferences

Add user preferences

src/invidious/views/channel.ecr

@@ -3,7 +3,7 @@
 <% end %>
 
 <h1><%= author %></h1>
-<% if authorized %>
+<% if user %>
     <% if subscriptions.includes? ucid %>
     <p>
         <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>">

src/invidious/views/layout.ecr

@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
   <link rel="stylesheet" href="/css/default.css">
-  <% if env.get? "darktheme" %>
+  <% if env.get?("user") && env.get("user").as(User).preferences.dark_mode %>
   <link rel="stylesheet" href="/css/darktheme.css">
   <% else %>
   <link rel="stylesheet" href="/css/lighttheme.css">
@@ -21,46 +21,46 @@
     <div class="pure-u-1 pure-u-md-1-5"></div>
     <div class="pure-u-1 pure-u-md-3-5">
       <div class="pure-g" style="padding:1em;">
-        <div class="pure-u-1 pure-u-md-1-5">
+        <div class="pure-u-1 pure-u-md-4-24">
           <center><a href="/" class="pure-menu-heading">Invidious</a></center>
         </div>
-        <div class="pure-u-1 pure-u-md-3-5">
+        <div class="pure-u-1 pure-u-md-12-24">
           <form class="pure-form" action="/search" method="get">
             <fieldset>
               <input type="search" style="width:100%;" name="q" placeholder="search" value="<%= env.params.query["q"]? %>">
             </fieldset>
           </form>
         </div>
-        <div class="pure-u-1 pure-u-md-1-5">
-        <% if env.get? "authorized" %>
-        <div class="pure-g">
-          <div class="pure-u-1-3">
-            <a href="/feed/subscriptions" class="pure-menu-heading">
-              <% notifications = env.get("notifications").as(Int32) %>
-              <% if notifications > 0 %>
-              <center><%= notifications %> <i class="fas fa-bell"></i></center>
-              <% else %>
-              <center><i class="far fa-bell"></i></center>
-              <% end %>
-            </a>
+        <div class="pure-u-1 pure-u-md-8-24">
+        <% if env.get? "user" %>
+          <div class="pure-g">
+            <div class="pure-u-1-3">
+              <a href="/feed/subscriptions" class="pure-menu-heading">
+                <% notifications = env.get("user").as(User).notifications.size %>
+                <% if notifications > 0 %>
+                <center><%= notifications %> <i class="fas fa-bell"></i></center>
+                <% else %>
+                <center><i class="far fa-bell"></i></center>
+                <% end %>
+              </a>
+            </div>
+            <div class="pure-u-1-3">
+              <a href="/preferences" class="pure-menu-heading">
+                <center><i class="fas fa-cog"></i></center>
+              </a>
+            </div>
+            <div class="pure-u-1-3">
+              <a href="/signout" class="pure-menu-heading">
+                <center>Sign out</center>
+              </a>
+            </div>
           </div>
-          <div class="pure-u-2-3">
-              <center><a href="/signout" class="pure-menu-heading">Sign out</a></center>
-          </div>
-        </div>
         <% else %>
           <center><a href="/login" class="pure-menu-heading">Login</a></center>
         <% end %>
         </div>
       </div>
       <%= content %>
-      <center class="h-box">
-        <% if env.get? "darktheme" %>
-        <a href="/modify_theme?light">Light theme</a>
-        <% else %>
-        <a href="/modify_theme?dark">Dark theme</a>
-        <% end %>
-      </center>
       <center class="h-box">
         Released under AGPLv3 by <a href="https://github.com/omarroth">Omar Roth</a> -
         source available <a href="https://github.com/omarroth/invidious">here</a>

src/invidious/views/preferences.ecr

@@ -0,0 +1,59 @@
+<% content_for "header" do %>
+<title>Preferences - Invidious</title>
+<% end %>
+
+<script>
+function update_value(element) {
+    document.getElementById('volume-value').innerText = element.value;
+}
+</script>
+
+<form class="pure-form pure-form-aligned" action="/preferences?referer=<%= referer %>" method="post">
+    <fieldset>
+        <legend>Player preferences</legend>
+
+        <div class="pure-control-group">
+            <label for="video_loop">Always loop: </label>
+            <input name="video_loop" id="video_loop" type="checkbox" <% if user.preferences.video_loop %>checked<% end %>>
+        </div>
+
+        <div class="pure-control-group">
+            <label for="autoplay">Autoplay: </label>
+            <input name="autoplay" id="autoplay" type="checkbox" <% if user.preferences.autoplay %>checked<% end %>>
+        </div>
+
+        <div class="pure-control-group">
+            <label for="speed">Default speed: </label>
+            <select name="speed" id="speed">
+            <% [2.0, 1.5, 1.0, 0.5].each do |option| %>
+                <option <% if user.preferences.speed == option %> selected <% end %>><%= option %></option>
+            <% end %>
+            </select>
+        </div>
+
+        <div class="pure-control-group">
+            <label for="quality">Preferred video quality: </label>
+            <select name="quality" id="quality">
+            <% ["hd720", "medium", "small"].each do |option| %>
+                <option <% if user.preferences.quality == option %> selected <% end %>><%= option %></option>
+            <% end %>
+            </select>
+        </div>
+
+        <div class="pure-control-group">
+            <label for="volume">Player volume: </label>
+            <input name="volume" id="volume" oninput="update_value(this);" type="range" min="0" max="100" step="5" value="<%= user.preferences.volume %>">
+            <span class="pure-form-message-inline" id="volume-value"><%= user.preferences.volume %></span>
+        </div>
+
+        <legend>Visual preferences</legend>
+        <div class="pure-control-group">
+            <label for="dark_mode">Dark mode: </label>
+            <input name="dark_mode" id="dark_mode" type="checkbox" <% if user.preferences.dark_mode %>checked<% end %>>
+        </div>
+
+        <div class="pure-controls">
+            <button type="submit" class="pure-button pure-button-primary">Save preferences</button>
+        </div>
+    </fieldset>
+</form>

src/invidious/views/watch.ecr

@@ -17,8 +17,12 @@
             <% end %>
         <% else %>
             <% fmt_stream.each_with_index do |fmt, i| %>
+                <% if preferences %>
+                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
+                <% else %>
                 <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
-            <% end %>    
+                <% end %>
+            <% end %>
         <% end %>
     </video>
 </div>
@@ -26,6 +30,10 @@
 <script>
 var options = {
     preload: "auto",
+    <% if preferences %>
+    <% if preferences.autoplay %>autoplay: true, <% end %>
+    <% if preferences.video_loop %>loop: true, <% end %>
+    <% end %>
     playbackRates: [0.5, 1, 1.5, 2],
     controlBar: {
       children: [
@@ -81,6 +89,10 @@ var player = videojs('player', options, function() {
   });
 });
 
+<% if preferences %>
+player.volume(<%= preferences.volume.to_f / 100 %>);
+player.playbackRate(<%= preferences.speed %>);
+<% end %>
 player.offset({
   start: <%= video_start %>,
   end: <%= video_end %>
@@ -165,7 +177,7 @@ player.src(currentSources);
                     <h3><%= video.author %></h3>
                 </a>
             </p>
-        <% if authorized %>
+        <% if user %>
             <% if subscriptions.includes? video.ucid %>
             <p>
                 <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>">