Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-26 23:47:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1166 from kskarthik/master

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ChaptersBar.vue
View File

@ -1,14 +1,17 @@
<template> <template>
<!-- desktop view --> <!-- desktop view -->
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden"> <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 <div
:key="chapter.start" :key="chapter.start"
v-for="chapter in chapters" v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)" @click="$emit('seek', chapter.start)"
class="chapter-vertical" class="chapter-vertical"
> >
<div class="flex"> <div class="flex">
<span class="mt-5 mr-2 text-current" v-text="index + 1" />
<img :src="chapter.image" :alt="chapter.title" /> <img :src="chapter.image" :alt="chapter.title" />
<div class="flex flex-col m-2"> <div class="flex flex-col m-2">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" /> <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />

17
src/components/NavBar.vue
View File

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