Merge pull request #1166 from kskarthik/master

Ctrl + K Keyboard Shortcut, Chapters count & index on desktop
This commit is contained in:
Kavin 2022-07-01 10:26:50 +01:00 committed by GitHub
commit 9d5939d0b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 3 deletions

View File

@ -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" />

View File

@ -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>