From c2f2d5bb113332a0e3787757f57ca1d4e65c8858 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Sun, 26 Jun 2022 14:27:12 +0530
Subject: [PATCH 1/2] feat: Ctrl+K will focus on search bar

---
 src/components/NavBar.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0c90e9d1..352c33b1 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -17,6 +17,7 @@
                 class="input !w-72 !h-10"
                 type="text"
                 role="search"
+                ref="videoSearch"
                 :title="$t('actions.search')"
                 :placeholder="$t('actions.search')"
                 @keyup="onKeyUp"
@@ -72,7 +73,7 @@
 
 <script>
 import SearchSuggestions from "./SearchSuggestions.vue";
-
+import hotkeys from "hotkeys-js";
 export default {
     components: {
         SearchSuggestions,
@@ -86,6 +87,7 @@ export default {
     mounted() {
         const query = new URLSearchParams(window.location.search).get("search_query");
         if (query) this.onSearchTextChange(query);
+        this.focusOnSearchBar();
     },
     computed: {
         shouldShowLogin(_this) {
@@ -96,6 +98,13 @@ export default {
         },
     },
     methods: {
+        // focus on search bar when Ctrl+k is pressed
+        focusOnSearchBar() {
+            hotkeys("ctrl+k", event => {
+                event.preventDefault();
+                this.$refs.videoSearch.focus();
+            });
+        },
         onKeyUp(e) {
             if (e.key === "ArrowUp" || e.key === "ArrowDown") {
                 e.preventDefault();
@@ -124,3 +133,9 @@ export default {
     },
 };
 </script>
+<style>
+.input:focus {
+    @apply border-2 border-red-500;
+    box-shadow: 0 0 15px rgba(239, 68, 68, var(--tw-border-opacity));
+}
+</style>

From 71004a148708e246551ced17200c8eb8a1a422ed Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Wed, 29 Jun 2022 16:36:22 +0530
Subject: [PATCH 2/2] feat: show chapters count & index in desktop layout

---
 src/components/ChaptersBar.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index fa82a257..9dd09083 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -1,14 +1,17 @@
 <template>
     <!-- desktop view -->
     <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden">
-        <h2 v-t="'video.chapters'" class="mb-2 bg-gray-500/50 p-2" />
+        <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
+            {{ $t("video.chapters") }} ({{ chapters.length }})
+        </h2>
         <div
             :key="chapter.start"
-            v-for="chapter in chapters"
+            v-for="(chapter, index) in chapters"
             @click="$emit('seek', chapter.start)"
             class="chapter-vertical"
         >
             <div class="flex">
+                <span class="mt-5 mr-2 text-current" v-text="index + 1" />
                 <img :src="chapter.image" :alt="chapter.title" />
                 <div class="flex flex-col m-2">
                     <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />