mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Merge pull request #1166 from kskarthik/master
Ctrl + K Keyboard Shortcut, Chapters count & index on desktop
This commit is contained in:
commit
9d5939d0b9
@ -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" />
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user