initial attempt at a night mode

jprjr · Mar 20, 2018 · 460eacd · 460eacd
1 parent ebc154f
commit 460eacd
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 3 deletions.
diff --git a/lib/multistreamer/migrations.lua b/lib/multistreamer/migrations.lua
@@ -153,6 +153,10 @@ local schemas = {
     return true
   end,
 
+  [1521568700] = function()
+    schema.add_column('users','preferences',types.text({ default = "{}"}))
+  end,
+
 }
 
 migrations.run_migrations(schemas)

diff --git a/lib/multistreamer/models/user.lua b/lib/multistreamer/models/user.lua
@@ -1,6 +1,8 @@
 -- luacheck: globals ngx
 local ngx = ngx
 local Model = require('lapis.db.model').Model
+local from_json = require('lapis.util').from_json
+local to_json = require('lapis.util').to_json
 local config = require'multistreamer.config'.get()
 local http
 local encode_base64
@@ -77,6 +79,19 @@ local User = Model:extend('users', {
   end,
   reset_token = function(self)
     self:update({access_token = make_token()})
+  end,
+  get_pref = function(self, key)
+    if not self.prefs then
+      self.prefs = from_json(self.preferences)
+    end
+    return self.prefs[key]
+  end,
+  save_pref = function(self, key, value)
+    if not self.prefs then
+      self.prefs = from_json(self.preferences)
+    end
+    self.prefs[key] = value
+    self:update({ preferences = to_json(self.prefs) })
   end
 })
 

diff --git a/lib/multistreamer/views/chat-widget-config.etlua b/lib/multistreamer/views/chat-widget-config.etlua
@@ -2,7 +2,7 @@
     <fieldset><legend>Chat Widget</legend>
         <div class="pure-control-group">
           <label for="widget_url">URL</label>
-          <input style="width: auto;" id="widget_url" type="text" value="<%= config.public_http_url .. config.http_prefix %>/stream/<%= stream.id %>/chat?token=<%= user.access_token %>&widget&font_size=16&hide_irc&hide_pm&from_bottom&show_picture">
+          <input style="width: auto;" id="widget_url" type="text" value="<%= config.public_http_url .. config.http_prefix %>/stream/<%= stream.id %>/chat?token=<%= user.access_token %>&widget&font_size=16&hide_irc&hide_pm&from_bottom&show_picture&night_mode=<%=params.night_mode == 'true' and 'true' or 'false' %>">
           <span class="pure-form-message-inline"><input type="button" value="Copy" class="pure-button pure-button-primary" id="copy_button"></span>
         </div>
     </fieldset>
@@ -36,10 +36,14 @@
             <label for="from_bottom">Scroll messages from bottom</label>
             <input id="from_bottom" type="checkbox" checked>
         </div>
+        <div class="pure-control-group">
+            <label for="night_mode">Night Mode</label>
+            <input id="night_mode" type="checkbox" <%= params.night_mode == 'true' and 'checked' or ''%>>
+        </div>
     </fieldset>
 </form>
 
-<iframe id="preview_frame" style="position: absolute; top: 0; right: 0; height: 100%; width: 50%" src="<%= config.public_http_url .. config.http_prefix %>/chat/preview?widget&font_size=16&hide_irc&hide_pm&from_bottom&show_picture"></iframe>
+<iframe id="preview_frame" style="position: absolute; top: 0; right: 0; height: 100%; width: 50%" src="<%= config.public_http_url .. config.http_prefix %>/chat/preview?widget&font_size=16&hide_irc&hide_pm&from_bottom&show_picture&night_mode=<%= params.night_mode == 'true' and 'true' or 'false'%>"></iframe>
 
 <script type="text/javascript">
 var preview_frame = document.getElementById('preview_frame');
@@ -51,6 +55,7 @@ var show_picture_box = document.getElementById('show_picture');
 var hide_irc_box = document.getElementById('hide_irc');
 var hide_pm_box = document.getElementById('hide_pm');
 var from_bottom_box = document.getElementById('from_bottom');
+var night_mode_box = document.getElementById('night_mode');
 
 function update_preview() {
     var widget_url = '<%= config.public_http_url .. config.http_prefix %>/stream/<%= stream.id %>/chat?token=<%= user.access_token %>&widget';
@@ -78,6 +83,12 @@ function update_preview() {
     if(from_bottom_box.checked) {
         widget_settings += '&from_bottom';
     }
+    if(night_mode_box.checked) {
+        widget_settings += '&night_mode=true';
+    }
+    else {
+        widget_settings += '&night_mode=false';
+    }
 
     widget_url += widget_settings;
     preview_url += widget_settings;
@@ -93,6 +104,7 @@ show_picture_box.addEventListener('change',update_preview);
 hide_irc_box.addEventListener('change',update_preview);
 hide_pm_box.addEventListener('change',update_preview);
 from_bottom_box.addEventListener('change',update_preview);
+night_mode_box.addEventListener('change',update_preview);
 
 var copy_button = document.getElementById('copy_button');
 

diff --git a/lib/multistreamer/views/chatlayout.etlua b/lib/multistreamer/views/chatlayout.etlua
@@ -6,6 +6,9 @@
   <title>multistreamer</title>
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/pure-min.css">
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.css">
+  <% if (user:get_pref('night_mode') and params.night_mode ~= 'false') or (params.night_mode == 'true') then %>
+  <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.dark.css">
+  <% end %>
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.chat.css">
   <script src="<%= url_for("site-root") %>static/js/commonmark.min.js"></script>
   <script type="text/javascript">

diff --git a/lib/multistreamer/views/layout.etlua b/lib/multistreamer/views/layout.etlua
@@ -6,6 +6,9 @@
   <title>multistreamer</title>
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/pure-min.css">
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.css">
+  <% if (user:get_pref('night_mode') and params.night_mode ~= 'false') or (params.night_mode == 'true') then %>
+  <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.dark.css">
+  <% end %>
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/auto-complete.css">
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/balloon.min.css">
 </head>

diff --git a/lib/multistreamer/views/profile.etlua b/lib/multistreamer/views/profile.etlua
@@ -13,6 +13,14 @@
   <input class="pure-button" type="submit" value="Reset Token" name="resetTokenBtn" id="resetTokenBtn" />
 </div>
 
+<div class="pure-control-group">
+  <label for="access_token">Night Mode</label>
+  <select name="night_mode" id="night_mode">
+    <option value="0" <%= user:get_pref('night_mode') and '' or 'selected' %>>Off</option>
+    <option value="1" <%= user:get_pref('night_mode') and 'selected' or '' %>>On</option>
+  </select
+</div>
+
 <div class="pure-control-group"><label>Save</label>
 <input class="pure-button pure-button-primary" type="submit" value="Submit" id="submitBtn" />
 </div>

diff --git a/lib/multistreamer/views/simplelayout.etlua b/lib/multistreamer/views/simplelayout.etlua
@@ -6,6 +6,9 @@
   <title>multistreamer</title>
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/pure-min.css">
   <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.css">
+  <% if params.night_mode == 'true' then %>
+  <link rel="stylesheet" href="<%= url_for("site-root") %>static/css/multistreamer.dark.css">
+  <% end %>
 </head>
 <body>
 <% content_for('inner') %>

diff --git a/lib/multistreamer/views/stream-dashboard.etlua b/lib/multistreamer/views/stream-dashboard.etlua
@@ -60,7 +60,7 @@ copyKeyBtn.addEventListener('mouseleave',function() {
 <% end %>
 <% if metadata_level == 2 or chat_level > 0 then %>
 <p><a target="_blank" href="<%= url_for('stream-chat', { id = stream.id })%>?show_picture">Chat</a></p>
-<p><a onclick="window.open('<%= url_for('stream-chat-widget-config', { id = stream.id }) %>','newwindow','width=1200,height=600'); return false;"  href="<%= url_for('stream-chat-widget-config', { id = stream.id})%>">Chat Widget</a></p>
+<p><a onclick="window.open('<%= url_for('stream-chat-widget-config', { id = stream.id }) %>?night_mode=<%= user:get_pref('night_mode') and 'true' or 'false' %>','newwindow','width=1200,height=600'); return false;"  href="<%= url_for('stream-chat-widget-config', { id = stream.id})%>">Chat Widget</a></p>
 <p><strong>IRC Room</strong> <code>#<%= user.username %>-<%= stream.slug %></code> <a href="irc<%= public_irc_ssl and 's' or '' %>://<%= public_irc_hostname %>:<%= public_irc_port %>/<%= user.username %>-<%= stream.slug %>,needpass">Join</a></p>
 <% end %>
 

diff --git a/lib/multistreamer/webapp.lua b/lib/multistreamer/webapp.lua
@@ -640,6 +640,7 @@ app:match('profile-edit', config.http_prefix .. '/profile/:id', respond_to({
     if self.params['resetTokenBtn'] ~= nil then
       self.user:reset_token()
     end
+    self.user:save_pref('night_mode',tonumber(self.params['night_mode']) == 1)
     return { render = 'profile' }
   end,
 }))

diff --git a/share/multistreamer/html/static/css/multistreamer.dark.css b/share/multistreamer/html/static/css/multistreamer.dark.css
@@ -0,0 +1,48 @@
+html {
+    background-color: #1b2836;
+    color: #e1e8ed;
+}
+
+div#chatinput, div.chatpicker, div.chatmessage {
+    background-color: #1f3a57;
+    color: #e1e8ed;
+}
+
+.pure-form select {
+    background-color: #1b2836;
+    color: #e1e8ed;
+    border: 1px solid #000;
+}
+
+.pure-form input, .pure-form.pure-form-aligned input, .pure-form.pure-form-aligned .pure-control-group input, input {
+    background-color: #1b2836;
+    border: 1px solid #000;
+    box-shadow: none;
+}
+
+.pure-form textarea, .pure-form.pure-form-aligned textarea, .pure-form.pure-form-aligned .pure-control-group textarea, textarea {
+    background-color: #1b2836;
+    border: 1px solid #000;
+    box-shadow: none;
+}
+
+li.pure-menu-item a.pure-menu-link {
+    color: #6b6b6b;
+}
+
+li.pure-menu-item.pure-menu-selected a.pure-menu-link {
+    color: #e1e8ed;
+}
+
+a.pure-menu-link:hover {
+    background-color: #303030;
+    color: #e1e8ed;
+}
+
+a.pure-menu-link:visited {
+    color: #e1e8ed;
+}
+
+.pure-form legend {
+    color: #e1e8ed;
+}