WIP: welcome message on home page (#740)

TODO: final text needs to be determined, then localized.

assets/css/darktheme.css

@@ -36,3 +36,7 @@ body {
   background-color: inherit;
   color: inherit;
 }
+
+.welcome-box {
+  background-image: linear-gradient(45deg, #111, #666);
+}

assets/css/default.css

@@ -137,6 +137,12 @@ img.thumbnail {
   top: -0.7em;
 }
 
+.infobox {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 1em ;
+}
+
 /*
  * Navbar
  */
@@ -255,6 +261,30 @@ input[type="search"]::-webkit-search-cancel-button {
   }
 }
 
+/*
+ * Welcome Message
+ */
+
+.welcome-outer {
+  margin: 0 1em;
+}
+
+.welcome-box {
+  padding: 0 1em ;
+}
+
+#dismiss_welcome {
+  font-size: small;
+  float: right;
+  margin: 1em 0;
+}
+
+#call_to_action {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
 /*
  * Footer
  */

assets/css/lighttheme.css

@@ -14,3 +14,7 @@ a:not([data-id]) > .icon,
 .playlist-restricted > ol > li > a {
   color: #303030;
 }
+
+.welcome-box {
+  background-image: linear-gradient(45deg, #fff, #ccc);
+}

assets/js/welcome.js

@@ -0,0 +1,22 @@
+var dismiss_welcome = document.getElementById('dismiss_welcome');
+dismiss_welcome.href = 'javascript:void(0);';
+
+dismiss_welcome.addEventListener('click', function () {
+    var dark_mode = document.getElementById('dark_theme').media === 'none';
+
+    var url = '/dismiss_welcome?redirect=false';
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 10000;
+    xhr.open('GET', url, true);
+
+    hide_welcome();
+    window.localStorage.setItem('welcome_dismissed', true);
+
+    xhr.send();
+});
+
+function hide_welcome (bool) {
+    document.getElementById('feed-menu').classList.remove('hidden');
+    document.getElementById('welcome-outer').classList.add('hidden');
+}

src/invidious.cr

@@ -1699,6 +1699,42 @@ get "/toggle_theme" do |env|
   end
 end
 
+get "/dismiss_welcome" do |env|
+  locale = LOCALES[env.get("preferences").as(Preferences).locale]?
+  referer = get_referer(env, unroll: false)
+
+  redirect = env.params.query["redirect"]?
+  redirect ||= "true"
+  redirect = redirect == "true"
+
+  preferences = env.get("preferences").as(Preferences)
+
+  preferences.welcome_dismissed = true
+
+  preferences = preferences.to_json
+
+  if Kemal.config.ssl || config.https_only
+    secure = true
+  else
+    secure = false
+  end
+
+  if config.domain
+    env.response.cookies["PREFS"] = HTTP::Cookie.new(name: "PREFS", domain: "#{config.domain}", value: preferences, expires: Time.utc + 2.years,
+      secure: secure, http_only: true)
+  else
+    env.response.cookies["PREFS"] = HTTP::Cookie.new(name: "PREFS", value: preferences, expires: Time.utc + 2.years,
+      secure: secure, http_only: true)
+  end
+
+  if redirect
+    env.redirect referer
+  else
+    env.response.content_type = "application/json"
+    "{}"
+  end
+end
+
 post "/watch_ajax" do |env|
   locale = LOCALES[env.get("preferences").as(Preferences).locale]?
 

src/invidious/helpers/helpers.cr

@@ -151,6 +151,7 @@ struct ConfigPreferences
     unseen_only:            {type: Bool, default: false},
     video_loop:             {type: Bool, default: false},
     volume:                 {type: Int32, default: 100},
+    welcome_dismissed:      {type: Bool, default: false},
   })
 end
 
@@ -215,7 +216,7 @@ struct Config
     hmac_key:                 String?,                              # HMAC signing key for CSRF tokens and verifying pubsub subscriptions
     domain:                   String?,                              # Domain to be used for links to resources on the site where an absolute URL is required
     use_pubsub_feeds:         {type: Bool | Int32, default: false}, # Subscribe to channels using PubSubHubbub (requires domain, hmac_key)
-    default_home:             {type: String, default: "Top"},
+    default_home:             {type: String, default: "Popular"},
     feed_menu:                {type: Array(String), default: ["Popular", "Top", "Trending", "Subscriptions"]},
     top_enabled:              {type: Bool, default: true},
     captcha_enabled:          {type: Bool, default: true},

src/invidious/users.cr

@@ -92,6 +92,7 @@ struct Preferences
     unseen_only:            {type: Bool, default: CONFIG.default_user_preferences.unseen_only},
     video_loop:             {type: Bool, default: CONFIG.default_user_preferences.video_loop},
     volume:                 {type: Int32, default: CONFIG.default_user_preferences.volume},
+    welcome_dismissed:      {type: Bool, default: CONFIG.default_user_preferences.welcome_dismissed},
   })
 end
 

src/invidious/views/components/feed_menu.ecr

@@ -1,4 +1,8 @@
-<div class="h-box pure-g">
+<% if !(env.get? "user") && !env.get("preferences").as(Preferences).welcome_dismissed %>
+    <div id="feed-menu" class="h-box pure-g hidden">
+<% else %>
+    <div id="feed-menu" class="h-box pure-g">
+<% end %>
     <div class="pure-u-1 pure-u-md-1-4"></div>
     <div class="pure-u-1 pure-u-md-1-2">
         <div class="pure-g">

src/invidious/views/components/welcome_message.ecr

@@ -0,0 +1,18 @@
+<div class="welcome-outer" id="welcome-outer">
+    <div class="infobox welcome-box">
+        <a id="dismiss_welcome" class="pure-button" href="/dismiss_welcome?referer=<%= env.get?("current_page") %>">dismiss</a>
+        <h1>Welcome to Invidious</h1>
+        <p>Invidious is a community developed Youtube-player, that respects your privacy. Features include:
+        <ul>
+            <li>Ad-free
+            <li>Audio-only mode
+            <li>Works without Javascript
+            <li>No Google account required
+            <li>Download video, audio and subtitles
+            <li><a href="https://github.com/omarroth/invidious/blob/master/README.md">and many more!</a>
+        </ul>
+        <p><a href="/login?referer=%2Fdata_control" class="pure-button pure-button-primary" id="call_to_action">create an account and import your subscriptions now</a>
+    </div>
+    <div class="pure-u-1 pure-u-md-1-4"></div>
+    <p>Here is a selection of videos that our community is interested in:
+</div>

src/invidious/views/popular.ecr

@@ -9,6 +9,9 @@
 </title>
 <% end %>
 
+<% if !(env.get? "user") && !env.get("preferences").as(Preferences).welcome_dismissed %>
+    <%= rendered "components/welcome_message" %>
+<% end %>
 <%= rendered "components/feed_menu" %>
 
 <div class="pure-g">

src/invidious/views/template.ecr

@@ -161,6 +161,8 @@
             }
         </script>
         <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
+    <% else %>
+        <script src="/js/welcome.js?v=<%= ASSET_COMMIT %>"></script>
     <% end %>
 </body>