2021-05-10 18:14:28 +00:00
|
|
|
<template>
|
2022-11-02 15:08:35 +00:00
|
|
|
<nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 pb-2.5 w-full relative">
|
2022-03-14 14:57:42 +00:00
|
|
|
<div class="flex-1 flex justify-start">
|
2022-08-17 13:34:57 +00:00
|
|
|
<router-link class="flex font-bold text-3xl items-center font-sans" to="/"
|
2021-08-22 10:27:09 +00:00
|
|
|
><img
|
|
|
|
alt="logo"
|
|
|
|
src="/img/icons/logo.svg"
|
|
|
|
height="32"
|
|
|
|
width="32"
|
2021-12-27 14:46:33 +00:00
|
|
|
class="w-10 mr-[-0.6rem]"
|
2021-08-22 10:27:09 +00:00
|
|
|
/>iped</router-link
|
2021-03-31 22:09:39 +00:00
|
|
|
>
|
|
|
|
</div>
|
2022-11-17 10:44:47 +00:00
|
|
|
<div class="lt-md:hidden search-container">
|
2021-03-31 22:09:39 +00:00
|
|
|
<input
|
2021-10-08 18:52:51 +00:00
|
|
|
v-model="searchText"
|
2022-11-17 10:44:47 +00:00
|
|
|
class="input w-72 h-10 pr-20"
|
2021-03-31 22:09:39 +00:00
|
|
|
type="text"
|
2021-09-21 21:58:25 +00:00
|
|
|
role="search"
|
2022-06-26 08:57:12 +00:00
|
|
|
ref="videoSearch"
|
2021-09-21 21:58:25 +00:00
|
|
|
:title="$t('actions.search')"
|
|
|
|
:placeholder="$t('actions.search')"
|
2021-04-07 09:22:55 +00:00
|
|
|
@keyup="onKeyUp"
|
2021-12-04 07:04:44 +00:00
|
|
|
@keypress="onKeyPress"
|
2021-03-31 22:09:39 +00:00
|
|
|
@focus="onInputFocus"
|
|
|
|
@blur="onInputBlur"
|
|
|
|
/>
|
2023-04-18 21:09:23 +00:00
|
|
|
<span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
|
2021-03-31 22:09:39 +00:00
|
|
|
</div>
|
2022-07-22 16:08:52 +00:00
|
|
|
<!-- three vertical lines for toggling the hamburger menu on mobile -->
|
|
|
|
<button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav">
|
|
|
|
<span class="line"></span>
|
|
|
|
<span class="line"></span>
|
|
|
|
<span class="line"></span>
|
|
|
|
</button>
|
|
|
|
<!-- navigation bar for large screen devices -->
|
|
|
|
<ul class="hidden md:(flex-1 flex justify-end flex text-1xl children:pl-3)">
|
|
|
|
<li v-if="shouldShowTrending">
|
|
|
|
<router-link v-t="'titles.trending'" to="/trending" />
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<router-link v-t="'titles.preferences'" to="/preferences" />
|
|
|
|
</li>
|
|
|
|
<li v-if="shouldShowLogin">
|
|
|
|
<router-link v-t="'titles.login'" to="/login" />
|
|
|
|
</li>
|
|
|
|
<li v-if="shouldShowLogin">
|
|
|
|
<router-link v-t="'titles.register'" to="/register" />
|
|
|
|
</li>
|
|
|
|
<li v-if="shouldShowHistory">
|
|
|
|
<router-link v-t="'titles.history'" to="/history" />
|
|
|
|
</li>
|
2023-01-06 19:38:42 +00:00
|
|
|
<li>
|
2022-07-22 16:08:52 +00:00
|
|
|
<router-link v-t="'titles.playlists'" to="/playlists" />
|
|
|
|
</li>
|
2022-08-01 14:16:06 +00:00
|
|
|
<li v-if="!shouldShowTrending">
|
2022-07-22 16:08:52 +00:00
|
|
|
<router-link v-t="'titles.feed'" to="/feed" />
|
|
|
|
</li>
|
|
|
|
</ul>
|
2021-03-31 22:09:39 +00:00
|
|
|
</nav>
|
2022-07-22 16:08:52 +00:00
|
|
|
<!-- navigation bar for mobile devices -->
|
2023-05-26 08:52:28 +00:00
|
|
|
<div
|
2022-07-22 16:49:27 +00:00
|
|
|
v-if="showTopNav"
|
2023-05-26 08:52:28 +00:00
|
|
|
class="mobile-nav flex flex-col mb-4 children:(p-1 w-full border-b border-dark-100 flex items-center gap-1)"
|
2022-07-22 16:49:27 +00:00
|
|
|
>
|
2023-05-26 08:52:28 +00:00
|
|
|
<router-link v-if="shouldShowTrending" to="/trending">
|
|
|
|
<div class="i-fa6-solid:fire"></div>
|
|
|
|
<i18n-t keypath="titles.trending"></i18n-t>
|
|
|
|
</router-link>
|
|
|
|
<router-link to="/preferences">
|
|
|
|
<div class="i-fa6-solid:gear"></div>
|
|
|
|
<i18n-t keypath="titles.preferences"></i18n-t>
|
|
|
|
</router-link>
|
|
|
|
<router-link v-if="shouldShowLogin" to="/login">
|
|
|
|
<div class="i-fa6-solid:user"></div>
|
|
|
|
<i18n-t keypath="titles.login"></i18n-t>
|
|
|
|
</router-link>
|
|
|
|
<router-link v-if="shouldShowLogin" to="/register">
|
|
|
|
<div class="i-fa6-solid:user-plus"></div>
|
|
|
|
<i18n-t keypath="titles.register"></i18n-t>
|
|
|
|
</router-link>
|
|
|
|
<router-link v-if="shouldShowHistory" to="/history">
|
|
|
|
<div class="i-fa6-solid:clock-rotate-left"></div>
|
|
|
|
<i18n-t keypath="titles.history"></i18n-t>
|
|
|
|
</router-link>
|
|
|
|
<router-link to="/playlists">
|
|
|
|
<div class="i-fa6-solid:list"></div>
|
|
|
|
<i18n-t keypath="titles.playlists"></i18n-t>
|
|
|
|
</router-link>
|
|
|
|
<router-link v-if="!shouldShowTrending" to="/feed">
|
|
|
|
<div class="i-fa6-solid:play"></div>
|
|
|
|
<i18n-t keypath="titles.feed"></i18n-t>
|
|
|
|
</router-link>
|
|
|
|
</div>
|
2022-07-22 16:49:27 +00:00
|
|
|
<!-- search suggestions for mobile devices -->
|
2023-05-26 08:52:28 +00:00
|
|
|
<div class="w-full mb-2 md:hidden search-container">
|
2021-03-31 22:09:39 +00:00
|
|
|
<input
|
2021-10-08 18:52:51 +00:00
|
|
|
v-model="searchText"
|
2022-08-17 13:34:57 +00:00
|
|
|
class="input h-10 w-full"
|
2021-03-31 22:09:39 +00:00
|
|
|
type="text"
|
2021-09-21 21:58:25 +00:00
|
|
|
role="search"
|
|
|
|
:title="$t('actions.search')"
|
|
|
|
:placeholder="$t('actions.search')"
|
2021-04-07 09:22:55 +00:00
|
|
|
@keyup="onKeyUp"
|
2021-12-04 07:04:44 +00:00
|
|
|
@keypress="onKeyPress"
|
2021-03-31 22:09:39 +00:00
|
|
|
@focus="onInputFocus"
|
|
|
|
@blur="onInputBlur"
|
|
|
|
/>
|
2023-04-18 21:09:23 +00:00
|
|
|
<span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
|
2021-03-31 22:09:39 +00:00
|
|
|
</div>
|
|
|
|
<SearchSuggestions
|
2022-09-11 18:01:58 +00:00
|
|
|
v-show="(searchText || showSearchHistory) && suggestionsVisible"
|
2021-04-07 09:22:55 +00:00
|
|
|
ref="searchSuggestions"
|
2021-10-08 18:52:51 +00:00
|
|
|
:search-text="searchText"
|
|
|
|
@searchchange="onSearchTextChange"
|
2021-03-31 22:09:39 +00:00
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-04-08 15:46:49 +00:00
|
|
|
import SearchSuggestions from "./SearchSuggestions.vue";
|
2022-06-26 08:57:12 +00:00
|
|
|
import hotkeys from "hotkeys-js";
|
2021-03-31 22:09:39 +00:00
|
|
|
export default {
|
|
|
|
components: {
|
2021-05-10 18:14:28 +00:00
|
|
|
SearchSuggestions,
|
2021-03-31 22:09:39 +00:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
searchText: "",
|
2021-05-10 18:14:28 +00:00
|
|
|
suggestionsVisible: false,
|
2022-07-22 16:08:52 +00:00
|
|
|
showTopNav: false,
|
2021-03-31 22:09:39 +00:00
|
|
|
};
|
|
|
|
},
|
2022-01-12 05:27:38 +00:00
|
|
|
mounted() {
|
2022-01-12 11:27:08 +00:00
|
|
|
const query = new URLSearchParams(window.location.search).get("search_query");
|
|
|
|
if (query) this.onSearchTextChange(query);
|
2022-06-26 08:57:12 +00:00
|
|
|
this.focusOnSearchBar();
|
2022-01-12 05:27:38 +00:00
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
computed: {
|
|
|
|
shouldShowLogin(_this) {
|
|
|
|
return _this.getAuthToken() == null;
|
|
|
|
},
|
2021-08-22 10:27:09 +00:00
|
|
|
shouldShowHistory(_this) {
|
|
|
|
return _this.getPreferenceBoolean("watchHistory", false);
|
|
|
|
},
|
2022-07-20 15:52:25 +00:00
|
|
|
shouldShowTrending(_this) {
|
|
|
|
return _this.getPreferenceString("homepage", "trending") != "trending";
|
|
|
|
},
|
2022-11-07 10:20:13 +00:00
|
|
|
showSearchHistory(_this) {
|
|
|
|
return _this.getPreferenceBoolean("searchHistory", false) && localStorage.getItem("search_history");
|
2022-09-11 18:01:58 +00:00
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
},
|
2021-03-31 22:09:39 +00:00
|
|
|
methods: {
|
2022-06-26 08:57:12 +00:00
|
|
|
// focus on search bar when Ctrl+k is pressed
|
|
|
|
focusOnSearchBar() {
|
|
|
|
hotkeys("ctrl+k", event => {
|
|
|
|
event.preventDefault();
|
|
|
|
this.$refs.videoSearch.focus();
|
|
|
|
});
|
|
|
|
},
|
2021-04-07 09:22:55 +00:00
|
|
|
onKeyUp(e) {
|
2021-12-04 07:04:44 +00:00
|
|
|
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
this.$refs.searchSuggestions.onKeyUp(e);
|
|
|
|
},
|
|
|
|
onKeyPress(e) {
|
2021-03-31 22:09:39 +00:00
|
|
|
if (e.key === "Enter") {
|
2021-07-14 19:22:00 +00:00
|
|
|
e.target.blur();
|
2021-03-31 22:09:39 +00:00
|
|
|
this.$router.push({
|
|
|
|
name: "SearchResults",
|
2021-05-10 18:14:28 +00:00
|
|
|
query: { search_query: this.searchText },
|
2021-03-31 22:09:39 +00:00
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onInputFocus() {
|
2022-09-11 18:01:58 +00:00
|
|
|
if (this.showSearchHistory) this.$refs.searchSuggestions.refreshSuggestions();
|
2021-03-31 22:09:39 +00:00
|
|
|
this.suggestionsVisible = true;
|
|
|
|
},
|
|
|
|
onInputBlur() {
|
|
|
|
this.suggestionsVisible = false;
|
2021-04-06 10:10:17 +00:00
|
|
|
},
|
|
|
|
onSearchTextChange(searchText) {
|
|
|
|
this.searchText = searchText;
|
2021-05-10 18:14:28 +00:00
|
|
|
},
|
|
|
|
},
|
2021-03-31 22:09:39 +00:00
|
|
|
};
|
|
|
|
</script>
|
2022-11-17 10:44:47 +00:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.search-container {
|
|
|
|
@apply relative inline-flex items-center;
|
|
|
|
}
|
|
|
|
.delete-search {
|
|
|
|
@apply absolute right-3 cursor-pointer rounded-full bg-[#ccc] w-4 h-4 text-center text-black opacity-50 hover:(opacity-70) text-size-[13px];
|
|
|
|
line-height: 1.05;
|
|
|
|
}
|
2023-05-28 09:02:10 +00:00
|
|
|
.mobile-nav div {
|
|
|
|
@apply mx-1;
|
2022-11-17 10:44:47 +00:00
|
|
|
}
|
|
|
|
</style>
|