mirror of https://github.com/VueTubeApp/VueTube
Merge pull request #148 from PickleNik/main
looks good 👍
A lot of refactoring but overall good improvements such as VueX
This commit is contained in:
Kenny
GitHub
commit
4a9fcdb27b
|
|
@ -1,3 +1,5 @@
|
|||
#IDEs
|
||||
.vscode
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
|
|
|||
|
|
@ -1,32 +1,47 @@
|
|||
<template>
|
||||
|
||||
<v-bottom-navigation v-model="tabSelection" shift class="bottomNav py-4 accent2">
|
||||
<v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link" plain v-ripple="false">
|
||||
|
||||
<v-btn
|
||||
v-for="(item, i) in tabs"
|
||||
:key="i"
|
||||
class="navButton"
|
||||
:to="item.link"
|
||||
plain
|
||||
v-ripple="false"
|
||||
>
|
||||
<span v-text="item.name" />
|
||||
<v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" :class="tabSelection == i ? 'tab primaryAlt' : ''" />
|
||||
|
||||
<v-icon
|
||||
v-text="item.icon"
|
||||
:color="tabSelection == i ? 'primary' : 'grey'"
|
||||
:class="tabSelection == i ? 'tab primaryAlt' : ''"
|
||||
/>
|
||||
</v-btn>
|
||||
<!-- <v-btn text class="navButton mr-2 fill-height" color="white" @click="searchBtn()"
|
||||
><v-icon>mdi-magnify</v-icon></v-btn
|
||||
> -->
|
||||
</v-bottom-navigation>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabSelection: 0,
|
||||
tabs: [
|
||||
// TODO: pull from Vuex & localStorage for customizations
|
||||
{ name: "Home", icon: "mdi-home", link: "/home" },
|
||||
//{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
|
||||
//{ name: "Upload", icon: "mdi-plus", link: "/upload" },
|
||||
{ name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subscriptions" },
|
||||
{
|
||||
name: "Subscriptions",
|
||||
icon: "mdi-youtube-subscription",
|
||||
link: "/subscriptions",
|
||||
},
|
||||
{ name: "Library", icon: "mdi-view-list", link: "/library" },
|
||||
// { name: "Settings", icon: "mdi-menu", link: "/settings" },
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -39,9 +54,7 @@ export default {
|
|||
z-index: 99999;
|
||||
}
|
||||
.navButton {
|
||||
width: 25vw !important;
|
||||
font-size: .66rem !important;
|
||||
/*border-radius: 2rem !important;*/
|
||||
font-size: 0.66rem !important;
|
||||
}
|
||||
.tab {
|
||||
padding: 0.1em 0.5em 0.1em 0.5em;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<v-card
|
||||
style="height: 4rem !important; display: flex; box-shadow: none !important"
|
||||
color="accent2"
|
||||
class="topNav rounded-0 pa-3"
|
||||
>
|
||||
<h3 class="my-auto ml-4" v-text="page" v-show="!search" />
|
||||
|
||||
<v-btn icon v-if="search" class="mr-3 my-auto" @click="$emit('close-search')">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-text-field
|
||||
solo
|
||||
dense
|
||||
flat
|
||||
label="Search"
|
||||
v-model="text"
|
||||
@input="$emit('text-changed', text)"
|
||||
class="searchBar"
|
||||
v-if="search"
|
||||
v-on:keyup.enter="$emit('search-btn', text)"
|
||||
/>
|
||||
|
||||
<v-spacer v-if="!search" />
|
||||
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
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
|
||||
icon
|
||||
tile
|
||||
class="ml-4 mr-2 my-auto fill-height"
|
||||
style="border-radius: 0.25rem !important"
|
||||
v-show="!search"
|
||||
to="/settings"
|
||||
><v-icon>mdi-dots-vertical</v-icon></v-btn
|
||||
>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["search", "page"],
|
||||
events: ["searchBtn", "textChanged", "closeSearch"],
|
||||
data: () => ({
|
||||
text: "",
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.topNav {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
/*border-radius: 0 0 1em 1em !important;*/
|
||||
}
|
||||
.topNavSearch {
|
||||
margin-bottom: -10em;
|
||||
margin-left: 2em;
|
||||
/*transform: translateY(-2.5%);*/
|
||||
}
|
||||
.searchBar {
|
||||
margin: 0;
|
||||
}
|
||||
.searchButton {
|
||||
width: 100%;
|
||||
justify-content: left !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,68 +1,92 @@
|
|||
<template>
|
||||
<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"
|
||||
>
|
||||
<h2 v-text="page" v-show="!search" />
|
||||
<v-app v-show="stateLoaded" style="background: black !important">
|
||||
<topNavigation
|
||||
@close-search="search = !search"
|
||||
@search-btn="searchBtn"
|
||||
@text-changed="textChanged"
|
||||
:search="search"
|
||||
:page="page"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
label="Search"
|
||||
v-model="text"
|
||||
@input="textChanged"
|
||||
class="searchBar"
|
||||
color="white"
|
||||
v-if="search"
|
||||
v-on:keyup.enter="searchBtn"
|
||||
/>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
|
||||
<v-btn text class="toolbarAction mr-2 fill-height" color="white" @click="searchBtn()"><v-icon>mdi-magnify</v-icon></v-btn>
|
||||
<v-btn text class="toolbarAction fill-height" color="white" v-show="!search" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn>
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
<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;">
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
margin-top: 4rem;
|
||||
background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%);
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="background scroll-y"
|
||||
style="padding: 0; height: calc(100vh - 8rem); overflow-x: hidden;"
|
||||
v-show="!search"
|
||||
class="background"
|
||||
style="
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 8rem);
|
||||
transition-duration: 0.3s;
|
||||
transition-property: border-radius;
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
}"
|
||||
>
|
||||
|
||||
<nuxt v-show="!search" />
|
||||
<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 text-capitalize" @click="youtubeSearch(item)" v-text="item[0]" />
|
||||
</v-list-item>
|
||||
<!-- element above removes artifacting from things like v-ripple by -->
|
||||
<!-- scrollbox below must be a standalone div -->
|
||||
<div class="scroll-y" style="height: 100%">
|
||||
<nuxt v-show="!search" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="search"
|
||||
class="accent2"
|
||||
style="
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 4rem);
|
||||
transition-duration: 0.3s;
|
||||
transition-property: border-radius;
|
||||
"
|
||||
>
|
||||
<div class="scroll-y" style="height: 100%">
|
||||
<div style="min-width: 180px" v-if="search">
|
||||
<v-list-item v-for="(item, index) in response" :key="index">
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
<v-btn
|
||||
text
|
||||
dense
|
||||
class="info--text searchButton text-left text-capitalize"
|
||||
@click="youtubeSearch(item)"
|
||||
v-text="item[0]"
|
||||
/>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<bottomNavigation v-if="!search" />
|
||||
|
||||
<updateChecker />
|
||||
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
.scroll-y {
|
||||
overflow-y: scroll !important; /* has to be scroll, not auto */
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
background: black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p, span, div {
|
||||
p,
|
||||
span,
|
||||
div {
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+/Edge */
|
||||
|
|
@ -70,59 +94,29 @@ p, span, div {
|
|||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.toolbarAction {
|
||||
min-width: 40px !important;
|
||||
}
|
||||
.topNav {
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
/*border-radius: 0 0 1em 1em !important;*/
|
||||
}
|
||||
.topNavSearch {
|
||||
margin-bottom: -10em;
|
||||
margin-left: 2em;
|
||||
/*transform: translateY(-2.5%);*/
|
||||
}
|
||||
.background {
|
||||
height: 100%;
|
||||
padding: 4em 0 4em 0; /* Account for Top/Bottom Novigation */
|
||||
}
|
||||
.searchBar {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
transform: translateY(-10%);
|
||||
width: 75%
|
||||
}
|
||||
.searchButton {
|
||||
width: 100%;
|
||||
justify-content: left !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { App as CapacitorApp } from '@capacitor/app';
|
||||
import { App as CapacitorApp } from "@capacitor/app";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data: () => ({
|
||||
search: false,
|
||||
|
||||
text: null,
|
||||
response: [],
|
||||
stateLoaded: false,
|
||||
}),
|
||||
|
||||
beforeCreate() {
|
||||
// initializes UI tweaks to the saved state
|
||||
this.$store.commit("tweaks/initTweaks");
|
||||
},
|
||||
mounted() {
|
||||
this.stateLoaded = true;
|
||||
//--- Back Button Listener ---//
|
||||
CapacitorApp.addListener('backButton', ({canGoBack}) => {
|
||||
|
||||
CapacitorApp.addListener("backButton", ({ canGoBack }) => {
|
||||
//--- Back Closes Search ---//
|
||||
if (this.search) {
|
||||
this.search = false;
|
||||
|
||||
//--- Back Goes Back ---//
|
||||
} else if (!canGoBack){
|
||||
//--- Back Goes Back ---//
|
||||
} else if (!canGoBack) {
|
||||
CapacitorApp.exitApp();
|
||||
} else {
|
||||
window.history.back();
|
||||
|
|
@ -130,19 +124,22 @@ export default {
|
|||
});
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
roundTweak: (state) => state.tweaks.roundTweak,
|
||||
}),
|
||||
page: function () {
|
||||
const splitPath = this.$route.path.split("/");
|
||||
let pageName = splitPath[splitPath.length-1];
|
||||
let pageName = splitPath[splitPath.length - 1];
|
||||
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]
|
||||
textChanged(text) {
|
||||
this.$youtube.autoComplete(text, (res) => {
|
||||
const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
|
||||
this.response = JSON.parse(data)[1];
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -151,19 +148,18 @@ export default {
|
|||
this.search = false;
|
||||
},
|
||||
|
||||
searchBtn() {
|
||||
const query = this.text;
|
||||
searchBtn(text) {
|
||||
const query = text;
|
||||
|
||||
if (this.search === true) {
|
||||
if(query) {
|
||||
if (query) {
|
||||
this.$router.push(`/search?q=${query}`);
|
||||
this.search = false;
|
||||
}
|
||||
} else {
|
||||
this.search = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -69,9 +69,9 @@ export default {
|
|||
dark: {
|
||||
primary: colors.red.darken2, //colors.blue.darken2
|
||||
primaryAlt: "#533",
|
||||
accent: "#333333",
|
||||
accent2: "#33333",
|
||||
background: "#222",
|
||||
accent: "#222",
|
||||
accent2: "#222",
|
||||
background: "#333",
|
||||
info: "#fff",
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="py-1">
|
||||
<v-card class="px-8 py-6 ma-4">
|
||||
<h3>Layout</h3>
|
||||
<v-switch class="mt-6" disabled label="Dense Navbars" />
|
||||
<v-switch disabled label="Disable Top Bar" />
|
||||
<!-- <v-switch class="mt-6" disabled label="Reverse (disabled)" /> -->
|
||||
</v-card>
|
||||
<v-card class="px-8 pt-6 ma-4">
|
||||
<h3>Rounded Corners</h3>
|
||||
<v-switch class="mt-6" disabled label="Reverse (disabled)" />
|
||||
<v-slider
|
||||
disabled
|
||||
class="mr-2"
|
||||
label="Outer (disabled)"
|
||||
:max="4"
|
||||
step="1"
|
||||
thumb-size="64"
|
||||
></v-slider>
|
||||
<v-slider
|
||||
class="mr-2"
|
||||
label="Inner"
|
||||
v-model="roundTweak"
|
||||
:max="4"
|
||||
step="1"
|
||||
thumb-size="64"
|
||||
>
|
||||
<template v-slot:thumb-label="{ value }">
|
||||
<div
|
||||
class="pa-4 white text-red red-text red--text"
|
||||
:style="{ borderRadius: value * 3 + 'px !important' }"
|
||||
></div>
|
||||
</template>
|
||||
</v-slider>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
roundTweak: {
|
||||
get() {
|
||||
return this.$store.state.tweaks.roundTweak;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("tweaks/setRoundTweak", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="py-1">
|
||||
|
||||
<div>
|
||||
<center v-if="videos.length == 0">
|
||||
<v-skeleton-loader type="card-avatar, article, actions" />
|
||||
<v-skeleton-loader type="card-avatar, article, actions" />
|
||||
|
|
@ -9,11 +8,11 @@
|
|||
<v-list-item v-for="(video, index) in videos" :key="index">
|
||||
<v-card class="entry" :to="`/watch?v=${video.id}`">
|
||||
<v-card-text>
|
||||
<div style="position: relative;">
|
||||
<div style="position: relative">
|
||||
<v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
|
||||
<div v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff;" />
|
||||
<div v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff" />
|
||||
</div>
|
||||
<div v-text="video.title" style="margin-top: 0.5em;" />
|
||||
<div v-text="video.title" style="margin-top: 0.5em" />
|
||||
<div v-text="`${video.views} • ${video.uploaded}`" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -40,15 +39,15 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
videos: []
|
||||
}
|
||||
videos: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const searchQuestion = this.$route.query.q
|
||||
const searchQuestion = this.$route.query.q;
|
||||
const vm = this;
|
||||
this.$youtube.search(searchQuestion, (data) => {
|
||||
vm.videos = data;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
{ name: "General", icon: "mdi-cog", to: "", disabled: true },
|
||||
{ name: "Theme", icon: "mdi-brush-variant", to: "/mods/theme" },
|
||||
{ name: "Player", icon: "mdi-motion-play-outline", to: "", disabled: true },
|
||||
{ name: "UI Tweaker", icon: "mdi-television-guide", to: "", disabled: true },
|
||||
{ name: "UI Tweaker", icon: "mdi-television-guide", to: "/mods/tweaks" },
|
||||
{ name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
|
||||
{ name: "Plugins", icon: "mdi-puzzle", to: "", disabled: true},
|
||||
{ name: "Updates", icon: "mdi-cloud-download-outline", to: "/mods/updates" },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
export const state = () => ({
|
||||
roundTweak: 0
|
||||
})
|
||||
export const mutations = {
|
||||
initTweaks(state) {
|
||||
// NOTE: localStorage is not reactive, so it will only be used on first load
|
||||
// currently called beforeCreate() in pages/default.vue
|
||||
if (process.client) {
|
||||
state.roundTweak = localStorage.getItem("roundTweak") || 0
|
||||
}
|
||||
},
|
||||
setRoundTweak (state, payload) {
|
||||
if (!isNaN(payload)) {
|
||||
state.roundTweak = payload
|
||||
localStorage.setItem("roundTweak", payload)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="deploymentTargetDropDown">
|
||||
<targetSelectedWithDropDown>
|
||||
<Target>
|
||||
<type value="QUICK_BOOT_TARGET" />
|
||||
<deviceKey>
|
||||
<Key>
|
||||
<type value="VIRTUAL_DEVICE_PATH" />
|
||||
<value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
|
||||
</Key>
|
||||
</deviceKey>
|
||||
</Target>
|
||||
</targetSelectedWithDropDown>
|
||||
<timeTargetWasSelectedWithDropDown value="2022-03-21T20:35:21.068578Z" />
|
||||
</component>
|
||||
</project>
|
||||
Loading…
Reference in New Issue