2022-01-24 22:56:57 +00:00
|
|
|
<template>
|
2022-03-17 23:17:08 +00:00
|
|
|
<v-app style="background: black !important;">
|
|
|
|
<v-card
|
|
|
|
style="height: 4rem !important; display: flex; box-shadow: none !important;"
|
|
|
|
color="accent white--text"
|
|
|
|
class="topNav rounded-0"
|
|
|
|
>
|
2022-03-07 18:38:54 +00:00
|
|
|
<h2 v-text="page" v-show="!search" />
|
2022-03-07 18:53:14 +00:00
|
|
|
|
|
|
|
<v-text-field
|
|
|
|
label="Search"
|
|
|
|
v-model="text"
|
|
|
|
@input="textChanged"
|
|
|
|
class="searchBar"
|
|
|
|
color="white"
|
|
|
|
v-if="search"
|
2022-03-19 13:00:23 +00:00
|
|
|
v-on:keyup.enter="searchBtn"
|
2022-03-07 18:53:14 +00:00
|
|
|
/>
|
|
|
|
|
2022-01-25 02:45:23 +00:00
|
|
|
<v-spacer />
|
2022-02-25 12:52:17 +00:00
|
|
|
|
2022-02-25 18:57:58 +00:00
|
|
|
|
2022-03-18 00:07:35 +00:00
|
|
|
<v-btn text class="toolbarAction mr-2 fill-height" color="white" @click="searchBtn()"><v-icon>mdi-magnify</v-icon></v-btn>
|
2022-03-14 17:13:24 +00:00
|
|
|
<v-btn text class="toolbarAction fill-height" color="white" v-show="!search" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn>
|
2022-03-02 17:53:04 +00:00
|
|
|
|
2022-01-24 23:16:53 +00:00
|
|
|
</v-card>
|
|
|
|
|
2022-02-25 12:52:17 +00:00
|
|
|
|
2022-03-18 00:52:38 +00:00
|
|
|
<div style="height: calc(100% - 1rem); margin-top: 1rem; padding-top: 3rem; background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%); border-radius: 1rem;">
|
2022-03-18 11:49:47 +00:00
|
|
|
<div
|
|
|
|
class="background scroll-y"
|
2022-03-18 00:52:38 +00:00
|
|
|
style="padding: 0; height: calc(100vh - 8rem); overflow-x: hidedn;"
|
2022-03-17 23:17:08 +00:00
|
|
|
>
|
2022-03-07 18:53:14 +00:00
|
|
|
|
2022-03-17 23:17:08 +00:00
|
|
|
<nuxt v-show="!search" />
|
2022-03-07 18:53:14 +00:00
|
|
|
<div style="min-width: 180px;" v-if="search">
|
|
|
|
<v-list-item v-for="(item, index) in response" :key="index">
|
|
|
|
<v-btn text dense class="info--text searchButton text-left" @click="youtubeSearch(item)" v-text="item[0]" />
|
|
|
|
</v-list-item>
|
|
|
|
</div>
|
|
|
|
|
2022-02-25 04:45:17 +00:00
|
|
|
</div>
|
2022-02-24 19:45:36 +00:00
|
|
|
</div>
|
2022-01-24 22:56:57 +00:00
|
|
|
|
2022-03-18 12:21:06 +00:00
|
|
|
<bottomNavigation v-if="!search" />
|
2022-01-24 22:56:57 +00:00
|
|
|
|
2022-03-13 20:16:00 +00:00
|
|
|
<updateChecker />
|
|
|
|
|
2022-01-24 22:56:57 +00:00
|
|
|
</v-app>
|
|
|
|
</template>
|
|
|
|
|
2022-02-24 19:45:36 +00:00
|
|
|
<style>
|
|
|
|
* {
|
|
|
|
font-family: Arial, Helvetica, sans-serif !important;
|
|
|
|
}
|
2022-03-17 23:17:08 +00:00
|
|
|
.scroll-y {
|
|
|
|
overflow-y: scroll !important; /* has to be scroll, not auto */
|
|
|
|
-webkit-overflow-scrolling: touch !important;
|
|
|
|
}
|
2022-03-06 16:55:16 +00:00
|
|
|
html, body {
|
2022-03-17 23:17:08 +00:00
|
|
|
background: black;
|
|
|
|
overflow: hidden;
|
2022-03-06 16:55:16 +00:00
|
|
|
}
|
2022-03-13 20:39:24 +00:00
|
|
|
|
|
|
|
p, span, div {
|
2022-03-14 17:13:24 +00:00
|
|
|
-webkit-user-select: none; /* Safari */
|
|
|
|
-moz-user-select: none; /* Firefox */
|
|
|
|
-ms-user-select: none; /* IE10+/Edge */
|
|
|
|
user-select: none; /* Standard */
|
2022-03-13 20:39:24 +00:00
|
|
|
}
|
2022-02-24 19:45:36 +00:00
|
|
|
</style>
|
|
|
|
|
2022-01-24 23:16:53 +00:00
|
|
|
<style scoped>
|
2022-02-24 22:21:28 +00:00
|
|
|
.toolbarAction {
|
2022-02-25 12:52:17 +00:00
|
|
|
min-width: 40px !important;
|
2022-02-24 22:21:28 +00:00
|
|
|
}
|
2022-01-24 23:16:53 +00:00
|
|
|
.topNav {
|
2022-02-25 04:45:17 +00:00
|
|
|
padding: 1rem;
|
2022-03-07 18:38:54 +00:00
|
|
|
position: fixed;
|
|
|
|
width: 100%;
|
2022-03-02 17:53:04 +00:00
|
|
|
top: 0;
|
|
|
|
z-index: 999;
|
2022-03-02 18:44:15 +00:00
|
|
|
/*border-radius: 0 0 1em 1em !important;*/
|
2022-01-24 23:16:53 +00:00
|
|
|
}
|
2022-01-25 02:45:23 +00:00
|
|
|
.topNavSearch {
|
2022-01-25 03:10:51 +00:00
|
|
|
margin-bottom: -10em;
|
2022-01-25 02:45:23 +00:00
|
|
|
margin-left: 2em;
|
2022-03-02 17:53:04 +00:00
|
|
|
/*transform: translateY(-2.5%);*/
|
|
|
|
}
|
|
|
|
.background {
|
|
|
|
height: 100%;
|
2022-03-07 18:38:54 +00:00
|
|
|
padding: 4em 0 4em 0; /* Account for Top/Bottom Novigation */
|
2022-01-25 02:45:23 +00:00
|
|
|
}
|
2022-03-07 18:53:14 +00:00
|
|
|
.searchBar {
|
|
|
|
margin: 0;
|
2022-03-13 18:41:04 +00:00
|
|
|
position: absolute;
|
2022-03-13 19:48:27 +00:00
|
|
|
transform: translateY(-10%);
|
2022-03-17 22:25:13 +00:00
|
|
|
width: 75%
|
2022-03-07 18:53:14 +00:00
|
|
|
}
|
|
|
|
.searchButton {
|
|
|
|
width: 100%;
|
|
|
|
justify-content: left !important;
|
|
|
|
}
|
2022-01-24 23:16:53 +00:00
|
|
|
</style>
|
|
|
|
|
2022-01-24 22:56:57 +00:00
|
|
|
<script>
|
2022-03-07 18:53:14 +00:00
|
|
|
import { App as CapacitorApp } from '@capacitor/app';
|
|
|
|
export default {
|
|
|
|
data: () => ({
|
|
|
|
search: false,
|
2022-02-25 12:52:17 +00:00
|
|
|
|
2022-03-07 18:53:14 +00:00
|
|
|
text: null,
|
|
|
|
response: [],
|
|
|
|
}),
|
2022-03-13 19:45:48 +00:00
|
|
|
|
2022-03-07 18:53:14 +00:00
|
|
|
mounted() {
|
2022-03-13 19:45:48 +00:00
|
|
|
//--- Load Saved Theme ---//
|
2022-03-15 22:33:16 +00:00
|
|
|
setTimeout(() => { //Set timeout is required to make it load properly... dont ask me why -Front
|
2022-03-15 20:11:57 +00:00
|
|
|
const darkTheme = localStorage.getItem('darkTheme');
|
|
|
|
if (darkTheme == "true") {
|
|
|
|
this.$vuetify.theme.dark = darkTheme;
|
2022-03-18 14:33:15 +00:00
|
|
|
//this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
|
|
|
|
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.dark.accent)
|
2022-03-18 11:49:47 +00:00
|
|
|
|
2022-03-16 06:18:01 +00:00
|
|
|
const isOled = localStorage.getItem('isOled')
|
2022-03-18 11:49:47 +00:00
|
|
|
|
2022-03-16 06:18:01 +00:00
|
|
|
if(isOled == "true") {
|
|
|
|
this.$vuetify.theme.themes.dark.accent = '#000',
|
|
|
|
this.$vuetify.theme.themes.dark.accent2 = '#000',
|
|
|
|
this.$vuetify.theme.themes.dark.background = '#000'
|
|
|
|
} else {
|
|
|
|
this.$vuetify.theme.themes.dark.accent = '#222',
|
|
|
|
this.$vuetify.theme.themes.dark.accent2 = '#222',
|
|
|
|
this.$vuetify.theme.themes.dark.background = '#333'
|
|
|
|
}
|
2022-03-18 11:49:47 +00:00
|
|
|
} else {
|
2022-03-18 14:33:15 +00:00
|
|
|
//this.$vuetube.statusBar.setLight() //Looks weird -Front
|
|
|
|
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.light.accent);
|
2022-03-15 20:01:16 +00:00
|
|
|
}
|
2022-03-15 22:33:16 +00:00
|
|
|
}, 0);
|
2022-03-13 19:45:48 +00:00
|
|
|
|
|
|
|
//--- Back Button Listener ---//
|
2022-03-07 18:53:14 +00:00
|
|
|
CapacitorApp.addListener('backButton', ({canGoBack}) => {
|
2022-03-13 18:20:43 +00:00
|
|
|
|
2022-03-13 19:45:48 +00:00
|
|
|
//--- Back Closes Search ---//
|
2022-03-13 18:20:43 +00:00
|
|
|
if (this.search) {
|
|
|
|
this.search = false;
|
2022-03-14 17:13:24 +00:00
|
|
|
|
2022-03-13 19:45:48 +00:00
|
|
|
//--- Back Goes Back ---//
|
|
|
|
} else if (!canGoBack){
|
2022-03-07 18:53:14 +00:00
|
|
|
CapacitorApp.exitApp();
|
|
|
|
} else {
|
|
|
|
window.history.back();
|
2022-02-24 22:21:28 +00:00
|
|
|
}
|
2022-03-07 18:53:14 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
page: function () {
|
2022-03-14 17:13:24 +00:00
|
|
|
const splitPath = this.$route.path.split("/");
|
|
|
|
let pageName = splitPath[splitPath.length-1];
|
2022-03-07 18:53:14 +00:00
|
|
|
pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
|
|
|
|
return pageName || "Home";
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
textChanged() {
|
|
|
|
this.$youtube.autoComplete(this.text, (res) => {
|
|
|
|
const data = res.replace(/^.*?\(/,'').replace(/\)$/,''); //Format Response
|
|
|
|
this.response = JSON.parse(data)[1]
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
youtubeSearch(item) {
|
2022-03-16 00:34:34 +00:00
|
|
|
this.$router.push(`/search?q=${item[0]}`);
|
2022-03-16 00:37:33 +00:00
|
|
|
this.search = false;
|
2022-03-17 22:25:13 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
searchBtn() {
|
|
|
|
const query = this.text;
|
|
|
|
|
|
|
|
if (this.search === true) {
|
2022-03-19 19:06:23 +00:00
|
|
|
if(query) {
|
|
|
|
this.$router.push(`/search?q=${query}`);
|
|
|
|
this.search = false;
|
|
|
|
}
|
2022-03-17 22:25:13 +00:00
|
|
|
} else {
|
|
|
|
this.search = true;
|
|
|
|
}
|
2022-02-24 19:55:29 +00:00
|
|
|
}
|
2022-03-17 22:25:13 +00:00
|
|
|
|
2022-01-24 22:56:57 +00:00
|
|
|
}
|
2022-03-07 18:53:14 +00:00
|
|
|
}
|
2022-01-24 22:56:57 +00:00
|
|
|
</script>
|