0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-12-05 01:17:28 +00:00
VueTube/NUXT/components/topNavigation.vue
2023-04-18 10:17:23 +12:00

164 lines
4.1 KiB
Vue

<template>
<v-card style="display: flex" class="rounded-0 pa-3 topNav background">
<!-- opacity with vue 😉 -->
<!-- :style="{ background: $vuetify.theme.currentTheme.primary + '55' }" -->
<h3
v-show="!search"
class="my-auto ml-4"
v-text="
$route.path.includes('channel')
? $store.state.channel.title
: $route.path.includes('playlist')
? $store.state.playlist.currentPlaylist.name
: page
"
/>
<v-btn
v-if="search"
icon
class="mr-3 my-auto"
@click="$emit('close-search')"
>
<v-icon>mdi-close</v-icon>
</v-btn>
<v-text-field
v-if="search"
v-model="text"
solo
dense
flat
autofocus
label="Search"
style="margin-top: 7px"
:background-color="
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
"
@input="$emit('text-changed', text)"
@keyup.enter="$emit('search-btn', text)"
/>
<v-spacer v-if="!search" />
<v-btn
v-if="!search && $route.path.includes('/home')"
v-show="page == 'Home'"
icon
tile
class="ml-3 mr-1 my-auto fill-height"
style="border-radius: 0.25rem !important"
@click="refreshRecommendations"
>
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-btn
v-if="$route.name !== 'settings' && !$route.path.includes('/mods')"
icon
tile
:loading="$store.state.search.loading"
class="ml-3 my-auto fill-height"
style="border-radius: 0.25rem !important"
@click="$emit('search-btn', text)"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn
v-show="!search"
icon
tile
class="ml-4 mr-2 my-auto fill-height rounded-xl"
:style="$route.name == 'settings' ? 'transform: rotate(180deg)' : ''"
@click="
$route.name == 'settings' ? closeSettings() : $router.push('/settings')
"
>
<v-icon>{{
$route.name == "settings"
? "mdi-close"
: $route.name.includes("mods")
? "mdi-arrow-left"
: "mdi-cog-outline"
}}</v-icon>
</v-btn>
</v-card>
</template>
<script>
export default {
props: {
search: {
type: Boolean,
default: false,
},
page: {
type: String,
default: "Home",
},
},
events: ["searchBtn", "textChanged", "closeSearch", "scrollToTop"],
data: () => ({
text: "",
presettings: false,
}),
watch: {
$route(next, prev) {
if (this.$route.path == "/settings" && !prev.name.includes("mods")) {
this.presettings = prev.path;
}
if (this.$route.path == "/search") {
this.text = this.$route.query.q;
}
},
},
methods: {
closeSettings() {
this.presettings
? this.$router.push(this.presettings)
: this.$router.go(-1);
this.presettings = false;
},
refreshRecommendations() {
this.$emit("scroll-to-top");
const continuations =
this.$store.state.recommendedVideos[
this.$store.state.recommendedVideos.length - 1
].continuations;
this.$store.commit("updateRecommendedVideos", []);
this.$youtube
.recommendContinuation(
continuations.find((element) => element.reloadContinuationData)
.reloadContinuationData.continuation,
"browse"
)
.then((result) => {
console.log(result);
if (result) this.$store.commit("updateRecommendedVideos", [result]);
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style scoped>
.topNav {
/* opacity with hex, wow 😉 */
/* background: linear-gradient(var(--v-background-base) -1000%, #00000000 1000%); */
/* box-shadow: inset 0 0 5rem var(--v-background-base) !important; */
height: calc(4rem + env(safe-area-inset-top)) !important;
padding-top: env(safe-area-inset-top) !important;
box-shadow: none !important;
position: fixed;
width: 100%;
top: 0;
}
.topNavSearch {
margin-bottom: -10em;
margin-left: 2em;
}
</style>