From 6cf6c56dd136c3e94a13852d7278fab8c6f3da7d Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Thu, 13 Jan 2022 22:19:19 +0100
Subject: [PATCH 1/2] Autofocus search bar only on search homepage

---
 src/invidious/views/components/search_box.ecr | 4 ++--
 src/invidious/views/search_homepage.ecr       | 2 +-
 src/invidious/views/template.ecr              | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/invidious/views/components/search_box.ecr b/src/invidious/views/components/search_box.ecr
index 4144d161..1240e5bd 100644
--- a/src/invidious/views/components/search_box.ecr
+++ b/src/invidious/views/components/search_box.ecr
@@ -1,8 +1,8 @@
 <form class="pure-form" action="/search" method="get">
 	<fieldset>
 		<input type="search" id="searchbox" autocomplete="off" autocorrect="off"
-		autocapitalize="none" spellcheck="false" autofocus name="q"
-		placeholder="<%= translate(locale, "search") %>"
+		autocapitalize="none" spellcheck="false" <% if autofocus %>autofocus<% end %>
+		name="q" placeholder="<%= translate(locale, "search") %>"
 		title="<%= translate(locale, "search") %>"
 		value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
 	</fieldset>
diff --git a/src/invidious/views/search_homepage.ecr b/src/invidious/views/search_homepage.ecr
index 45561d1e..2424a1cf 100644
--- a/src/invidious/views/search_homepage.ecr
+++ b/src/invidious/views/search_homepage.ecr
@@ -14,7 +14,7 @@
     </div>
     <div class="pure-u-1-4"></div>
     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-        <%= rendered "components/search_box" %>
+        <% autofocus = true %><%= rendered "components/search_box" %>
     </div>
     <div class="pure-u-1-4"></div>
 </div>
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr
index efa434bf..240b523a 100644
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@@ -35,7 +35,7 @@
                         <a href="/" class="index-link pure-menu-heading">Invidious</a>
                     </div>
                     <div class="pure-u-1 pure-u-md-12-24 searchbar">
-                        <%= rendered "components/search_box" %>
+                        <% autofocus = false %><%= rendered "components/search_box" %>
                     </div>
                 <% end %>
 

From 8aed1e11c34a063b7c8a19934e147118db0709d1 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Thu, 13 Jan 2022 22:20:10 +0100
Subject: [PATCH 2/2] Add JS to focus search box on '/'

---
 assets/js/handlers.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/assets/js/handlers.js b/assets/js/handlers.js
index 1498f39a..a417fcca 100644
--- a/assets/js/handlers.js
+++ b/assets/js/handlers.js
@@ -142,4 +142,16 @@
         var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
         xhr.send('csrf_token=' + csrf_token);
     }
+
+    // Handle keypresses
+    window.addEventListener('keydown', (event) => {
+        // Ignore modifier keys
+        if (event.ctrlKey || event.metaKey) { return; }
+
+        // Focus search bar on '/'
+        if (event.key == "/") {
+            document.getElementById('searchbox').focus();
+            event.preventDefault();
+        }
+    });
 })();