Merge pull request #1977 from syeopite/add996

Change empty home page to search engine like layout

assets/css/default.css

@@ -178,7 +178,7 @@ img.thumbnail {
   flex: 1;
 }
 
-.navbar > .searchbar {
+.searchbar {
   flex-grow: 2; /* take double the space of the other items */
 }
 
@@ -191,7 +191,7 @@ img.thumbnail {
   display: inline;
 }
 
-.navbar > .searchbar .pure-form input[type="search"] {
+.searchbar .pure-form input[type="search"] {
   margin-bottom: 1px;
 
   border-top: 0;
@@ -216,12 +216,12 @@ input[type="search"]::-webkit-search-cancel-button {
   background-size: 14px;
 }
 
-.navbar > .searchbar .pure-form fieldset {
+.searchbar .pure-form fieldset {
   padding: 0;
 }
 
 /* attract focus to the searchbar by adding a subtle transition */
-.navbar > .searchbar .pure-form input[type="search"]:focus {
+.searchbar .pure-form input[type="search"]:focus {
   margin-bottom: 0px;
   border-bottom: 2px solid #aaa;
 }
@@ -594,7 +594,7 @@ body.dark-theme {
   color: #f0f0f0;
 }
 
-.dark-theme .navbar > .searchbar input {
+.dark-theme .searchbar input {
   background-color: inherit;
   color: inherit;
 }
@@ -633,7 +633,7 @@ body.dark-theme {
     color: #f0f0f0;
   }
 
-  .no-theme .navbar > .searchbar input {
+  .no-theme .searchbar input {
     background-color: inherit;
     color: inherit;
   }

assets/css/empty.css

@@ -0,0 +1,16 @@
+#search-widget {
+    text-align: center;
+    margin: 20vh 0 50px 0;
+}
+
+#logo > h1 {
+    font-size: 3.5em;
+    margin: 0;
+    padding: 0;
+}
+
+@media screen and (max-width: 1500px) and (max-height: 1000px) {
+    #logo > h1 {
+      font-size: 10vmin;
+    }
+}

locales/ar.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` ثوانى",
     "Fallback comments: ": "التعليقات البديلة: ",
     "Popular": "الأكثر شعبية",
+    "Search": "",
     "Top": "الأفضل",
     "About": "حول",
     "Rating: ": "التقييم: ",

locales/bn_BD.json

@@ -327,6 +327,7 @@
     "`x` seconds.": "",
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "",
     "Rating: ": "",

locales/cs.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "Informace",
     "Rating: ": "Hodnocení: ",

locales/da.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "",
     "Rating: ": "",

locales/de.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` Sekunden",
     "Fallback comments: ": "Alternative Kommentare: ",
     "Popular": "Populär",
+    "Search": "",
     "Top": "Top",
     "About": "Über",
     "Rating: ": "Bewertung: ",

locales/el.json

@@ -325,6 +325,7 @@
     "`x` seconds.": "`x` δευτερόλεπτα.",
     "Fallback comments: ": "Εναλλακτικά σχόλια: ",
     "Popular": "Δημοφιλή",
+    "Search": "",
     "Top": "Κορυφαία",
     "About": "Σχετικά",
     "Rating: ": "Aξιολόγηση: ",

locales/en-US.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "Fallback comments: ",
     "Popular": "Popular",
+    "Search": "Search",
     "Top": "Top",
     "About": "About",
     "Rating: ": "Rating: ",

locales/eo.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` sekundoj",
     "Fallback comments: ": "Retrodefaŭltaj komentoj: ",
     "Popular": "Popularaj",
+    "Search": "",
     "Top": "Supraj",
     "About": "Pri",
     "Rating: ": "Takso: ",

locales/es.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` segundos",
     "Fallback comments: ": "Comentarios alternativos: ",
     "Popular": "Populares",
+    "Search": "",
     "Top": "Destacados",
     "About": "Acerca de",
     "Rating: ": "Valoración: ",

locales/eu.json

@@ -310,6 +310,7 @@
     "`x` seconds": "",
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "",
     "Rating: ": "",

locales/fa.json

@@ -327,6 +327,7 @@
     "`x` seconds.": "`x` ثانیه.",
     "Fallback comments: ": "نظرات عقب گرد: ",
     "Popular": "محبوب",
+    "Search": "",
     "Top": "بالا",
     "About": "درباره",
     "Rating: ": "رتبه دهی: ",

locales/fi.json

@@ -327,6 +327,7 @@
     "`x` seconds.": "`x` sekuntia.",
     "Fallback comments: ": "varakommentit: ",
     "Popular": "Suosittu",
+    "Search": "",
     "Top": "Ylin",
     "About": "Tietoa",
     "Rating: ": "Arvosana: ",

locales/fr.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` secondes",
     "Fallback comments: ": "Commentaires alternatifs : ",
     "Popular": "Populaire",
+    "Search": "",
     "Top": "Top",
     "About": "À propos",
     "Rating: ": "Évaluation : ",

locales/he.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "Top",
     "About": "על אודות",
     "Rating: ": "דירוג: ",

locales/hr.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "Alternativni komentari: ",
     "Popular": "Popularni",
+    "Search": "",
     "Top": "Najbolji",
     "About": "Informacije",
     "Rating: ": "Ocjena: ",

locales/hu-HU.json

@@ -309,6 +309,7 @@
     "`x` seconds": "`x` másodperc",
     "Fallback comments: ": "Másodlagos kommentek: ",
     "Popular": "Népszerű",
+    "Search": "",
     "Top": "Top",
     "About": "Leírás",
     "Rating: ": "Besorolás: ",

locales/id.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "",
     "Popular": "Populer",
+    "Search": "",
     "Top": "",
     "About": "Ihwal",
     "Rating: ": "Peringkat: ",

locales/is.json

@@ -325,7 +325,7 @@
     "`x` seconds.": "`x` sekúndur.",
     "Fallback comments: ": "Vara ummæli: ",
     "Popular": "Vinsælt",
-    "permalink": "Varanlegur tengill",
+    "Search": "",
     "Top": "Topp",
     "About": "Um",
     "Rating: ": "Einkunn: ",
@@ -342,6 +342,7 @@
     "%A %B %-d, %Y": "%A %B %-d, %Y",
     "(edited)": "(breytt)",
     "YouTube comment permalink": "YouTube ummæli varanlegur tengill",
+    "permalink": "Varanlegur tengill",
     "`x` marked it with a ❤": "`x` merkti það með ❤",
     "Audio mode": "Hljóð ham",
     "Video mode": "Myndband ham",

locales/it.json

@@ -325,6 +325,7 @@
     "`x` seconds..": "`x` secondi.",
     "Fallback comments: ": "Commenti alternativi: ",
     "Popular": "Popolare",
+    "Search": "",
     "Top": "Top",
     "About": "Al riguardo",
     "Rating: ": "Punteggio: ",

locales/ja.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "フォールバック時のコメント: ",
     "Popular": "人気",
+    "Search": "",
     "Top": "トップ",
     "About": "このサービスについて",
     "Rating: ": "評価: ",

locales/nb-NO.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` sekunder",
     "Fallback comments: ": "Tilbakefallskommentarer: ",
     "Popular": "Populært",
+    "Search": "",
     "Top": "Topp",
     "About": "Om",
     "Rating: ": "Vurdering: ",

locales/nl.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` seconden",
     "Fallback comments: ": "Terugvallen op ",
     "Popular": "Populair",
+    "Search": "",
     "Top": "Top",
     "About": "Over",
     "Rating: ": "Waardering: ",

locales/pl.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` sekund",
     "Fallback comments: ": "Zastępcze komentarze: ",
     "Popular": "Popularne",
+    "Search": "",
     "Top": "Top",
     "About": "Informacje",
     "Rating: ": "Ocena: ",

locales/pt-BR.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` segundos",
     "Fallback comments: ": "Comentários alternativos: ",
     "Popular": "Populares",
+    "Search": "",
     "Top": "No topo",
     "About": "Sobre",
     "Rating: ": "Avaliação: ",

locales/pt-PT.json

@@ -327,6 +327,7 @@
     "`x` seconds..": "`x` segundos.",
     "Fallback comments: ": "Comentários alternativos: ",
     "Popular": "Popular",
+    "Search": "",
     "Top": "Top",
     "About": "Sobre",
     "Rating: ": "Avaliação: ",

locales/ro.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` secunde",
     "Fallback comments: ": "Comentarii alternative: ",
     "Popular": "Popular",
+    "Search": "",
     "Top": "Top",
     "About": "Despre",
     "Rating: ": "Evaluare: ",

locales/ru.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` секунд",
     "Fallback comments: ": "Резервные комментарии: ",
     "Popular": "Популярное",
+    "Search": "",
     "Top": "Топ",
     "About": "О сайте",
     "Rating: ": "Рейтинг: ",

locales/si.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "",
     "Rating: ": "",

locales/sk.json

@@ -327,6 +327,7 @@
     "`x` seconds.": "",
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "",
     "Rating: ": "",

locales/sr.json

@@ -361,6 +361,7 @@
     },
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "",
     "Rating: ": "",

locales/sr_Cyrl.json

@@ -310,6 +310,7 @@
     "`x` seconds.": "",
     "Fallback comments: ": "",
     "Popular": "",
+    "Search": "",
     "Top": "",
     "About": "",
     "Rating: ": "",

locales/sv-SE.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` sekunder",
     "Fallback comments: ": "Fallback-kommentarer: ",
     "Popular": "Populärt",
+    "Search": "",
     "Top": "Topp",
     "About": "Om",
     "Rating: ": "Betyg: ",

locales/tr.json

@@ -318,6 +318,7 @@
     "`x` seconds": "`x` saniye",
     "Fallback comments: ": "Yedek yorumlar: ",
     "Popular": "Popüler",
+    "Search": "",
     "Top": "Enler",
     "About": "Hakkında",
     "Rating: ": "Değerlendirme: ",

locales/uk.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` секунд",
     "Fallback comments: ": "Резервні коментарі: ",
     "Popular": "Популярне",
+    "Search": "",
     "Top": "Топ",
     "About": "Про сайт",
     "Rating: ": "Рейтинг: ",

locales/zh-CN.json

@@ -310,6 +310,7 @@
     "`x` seconds": "`x` 秒",
     "Fallback comments: ": "后备评论: ",
     "Popular": "热门频道",
+    "Search": "",
     "Top": "热门视频",
     "About": "关于",
     "Rating: ": "评分: ",

locales/zh-TW.json

@@ -325,6 +325,7 @@
     "`x` seconds.": "`x` 秒",
     "Fallback comments: ": "汰退留言： ",
     "Popular": "熱門頻道",
+    "Search": "",
     "Top": "熱門影片",
     "About": "關於",
     "Rating: ": "評分： ",

src/invidious/helpers/macros.cr

@@ -48,7 +48,8 @@ module JSON::Serializable
   end
 end
 
-macro templated(filename, template = "template")
+macro templated(filename, template = "template", navbar_search = true)
+  navbar_search = {{navbar_search}}
   render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/#{{{template}}}.ecr"
 end
 

src/invidious/routes/misc.cr

@@ -22,7 +22,7 @@ class Invidious::Routes::Misc < Invidious::Routes::BaseRoute
         env.redirect "/feed/popular"
       end
     else
-      templated "empty"
+      templated "search_homepage", navbar_search: false
     end
   end
 

src/invidious/views/empty.ecr

@@ -1,8 +0,0 @@
-<% content_for "header" do %>
-<meta name="description" content="<%= translate(locale, "An alternative front-end to YouTube") %>">
-<title>
-    Invidious
-</title>
-<% end %>
-
-<%= rendered "components/feed_menu" %>

src/invidious/views/preferences.ecr

@@ -150,7 +150,7 @@
                 <label for="default_home"><%= translate(locale, "Default homepage: ") %></label>
                 <select name="default_home" id="default_home">
                     <% feed_options.each do |option| %>
-                        <option value="<%= option %>" <% if preferences.default_home == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
+                        <option value="<%= option %>" <% if preferences.default_home == option %> selected <% end %>><%= translate(locale, option.blank? ? "Search" : option) %></option>
                     <% end %>
                 </select>
             </div>
@@ -160,7 +160,7 @@
                 <% (feed_options.size - 1).times do |index| %>
                     <select name="feed_menu[<%= index %>]" id="feed_menu[<%= index %>]">
                         <% feed_options.each do |option| %>
-                            <option value="<%= option %>" <% if preferences.feed_menu[index]? == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
+                            <option value="<%= option %>" <% if preferences.feed_menu[index]? == option %> selected <% end %>><%= translate(locale, option.blank? ? "Search" : option) %></option>
                         <% end %>
                     </select>
                 <% end %>

src/invidious/views/search_homepage.ecr

@@ -0,0 +1,24 @@
+<% content_for "header" do %>
+<meta name="description" content="<%= translate(locale, "An alternative front-end to YouTube") %>">
+<title>
+    Invidious
+</title>
+<link rel="stylesheet" href="/css/empty.css?v=<%= ASSET_COMMIT %>">
+<% end %>
+
+<%= rendered "components/feed_menu" %>
+
+<div class="pure-g h-box" id="search-widget">
+    <div class="pure-u-1" id="logo">
+        <h1 href="/" class="pure-menu-heading">Invidious</h1>
+    </div>
+    <div class="pure-u-1-4"></div>
+    <div class="pure-u-1 pure-u-md-12-24 searchbar">
+        <form class="pure-form" action="/search" method="get">
+            <fieldset>
+                <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+            </fieldset>
+        </form>
+    </div>
+    <div class="pure-u-1-4"></div>
+</div>

src/invidious/views/template.ecr

@@ -28,16 +28,19 @@
         <div class="pure-u-1 pure-u-md-2-24"></div>
         <div class="pure-u-1 pure-u-md-20-24", id="contents">
             <div class="pure-g navbar h-box">
-                <div class="pure-u-1 pure-u-md-4-24">
+                <% if navbar_search %>
-                    <a href="/" class="index-link pure-menu-heading">Invidious</a>
+                    <div class="pure-u-1 pure-u-md-4-24">
-                </div>
+                        <a href="/" class="index-link pure-menu-heading">Invidious</a>
-                <div class="pure-u-1 pure-u-md-12-24 searchbar">
+                    </div>
-                    <form class="pure-form" action="/search" method="get">
+                    <div class="pure-u-1 pure-u-md-12-24 searchbar">
-                        <fieldset>
+                        <form class="pure-form" action="/search" method="get">
-                            <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+                            <fieldset>
-                        </fieldset>
+                                <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
-                    </form>
+                            </fieldset>
-                </div>
+                        </form>
+                    </div>
+                <% end %>
+
                 <div class="pure-u-1 pure-u-md-8-24 user-field">
                     <% if env.get? "user" %>
                         <div class="pure-u-1-4">