etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-25 04:35:17 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #157 from PickleNik/main

Browse source 
Search & Watch UI improvements
This commit is contained in:
Kenny 2022-03-21 21:54:31 -04:00 committed by GitHub
commit 19f4f1a597
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 69 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
NUXT/components/bottomNavigation.vue
View file

@ -2,7 +2,7 @@
<v-bottom-navigation <v-bottom-navigation
v-model="tabSelection" v-model="tabSelection"
shift shift
class="bottomNav py-4 accent2" class="bottomNav py-4 accent"
> >
<v-btn <v-btn
v-for="(item, i) in tabs" v-for="(item, i) in tabs"
@ -15,7 +15,7 @@
<span v-text="item.name" /> <span v-text="item.name" />
<v-icon <v-icon
:color="tabSelection == i ? 'primary' : 'grey'" :color="tabSelection == i ? 'primary' : 'grey'"
:class="tabSelection == i ? 'tab primaryAlt' : ''" :class="tabSelection == i ? 'tab primary lighten-2' : ''"
v-text="item.icon" v-text="item.icon"
/> />
</v-btn> </v-btn>
@ -58,6 +58,7 @@ export default {
z-index: 99999; z-index: 99999;
} }
.navButton { .navButton {
width: 25vw !important;
font-size: 0.66rem !important; font-size: 0.66rem !important;
} }
.tab { .tab {

6
NUXT/components/topNavigation.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<v-card <v-card
style="height: 4rem !important; display: flex; box-shadow: none !important" style="height: 4rem !important; display: flex; box-shadow: none !important"
color="accent2" color="accent"
class="topNav rounded-0 pa-3" class="topNav rounded-0 pa-3"
> >
<h3 v-show="!search" class="my-auto ml-4" v-text="page" /> <h3 v-show="!search" class="my-auto ml-4" v-text="page" />
@ -84,8 +84,4 @@ export default {
.searchBar { .searchBar {
margin: 0; margin: 0;
} }
.searchButton {
width: 100%;
justify-content: left !important;
}
</style> </style>

21
NUXT/layouts/default.vue
View file

@ -8,7 +8,7 @@
@text-changed="textChanged" @text-changed="textChanged"
/> />
<div class="accent2" style="height: 100%; margin-top: 4rem"> <div class="accent" style="height: 100%; margin-top: 4rem">
<div <div
v-show="!search" v-show="!search"
class="background" class="background"
@ -31,7 +31,7 @@
<div <div
v-show="search" v-show="search"
class="accent2" class="accent"
style=" style="
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
@ -42,15 +42,17 @@
> >
<div class="scroll-y" style="height: 100%"> <div class="scroll-y" style="height: 100%">
<div v-if="search" style="min-width: 180px"> <div v-if="search" style="min-width: 180px">
<v-list-item v-for="(item, index) in response" :key="index"> <v-list-item v-for="(item, index) in response" :key="index" class="px-0">
<v-icon>mdi-magnify</v-icon>
<v-btn <v-btn
text text
tile
dense dense
class="info--text searchButton text-left text-capitalize" class="info--text searchButton text-left text-capitalize"
@click="youtubeSearch(item)" @click="youtubeSearch(item)"
v-text="item[0]" >
/> <v-icon class="mr-5">mdi-magnify</v-icon>
{{ item[0] }}
</v-btn>
</v-list-item> </v-list-item>
</div> </div>
</div> </div>
@ -88,6 +90,13 @@ div {
} }
</style> </style>
<style scoped>
.searchButton {
width: 100%;
justify-content: left !important;
}
</style>
<script> <script>
import { App as CapacitorApp } from "@capacitor/app"; import { App as CapacitorApp } from "@capacitor/app";
import { mapState } from "vuex"; import { mapState } from "vuex";

18
NUXT/nuxt.config.js
View file

@ -54,19 +54,21 @@ export default {
options: { customProperties: true }, options: { customProperties: true },
themes: { themes: {
light: { light: {
primary: colors.red.lighten2, primary: {
primaryAlt: colors.red.lighten4, base: colors.red.lighten2,
accent: "#CD201F", lighten2: colors.red.lighten4,
accent2: "#fff", },
background: "#fff", background: "#fff",
accent: "#fff",
info: "#000", info: "#000",
}, },
dark: { dark: {
primary: colors.red.darken2, //colors.blue.darken2 primary: {
primaryAlt: "#533", base: colors.red.darken2,
accent: "#222", lighten2: "#533",
accent2: "#222", },
background: "#333", background: "#333",
accent: "#222",
info: "#fff", info: "#fff",
}, },
}, },

4
NUXT/pages/index.vue
View file

@ -42,11 +42,11 @@ export default {
if (isOled == "true") { if (isOled == "true") {
(this.$vuetify.theme.themes.dark.accent = "#000"), (this.$vuetify.theme.themes.dark.accent = "#000"),
(this.$vuetify.theme.themes.dark.accent2 = "#000"), (this.$vuetify.theme.themes.dark.accent = "#000"),
(this.$vuetify.theme.themes.dark.background = "#000"); (this.$vuetify.theme.themes.dark.background = "#000");
} else { } else {
(this.$vuetify.theme.themes.dark.accent = "#222"), (this.$vuetify.theme.themes.dark.accent = "#222"),
(this.$vuetify.theme.themes.dark.accent2 = "#222"), (this.$vuetify.theme.themes.dark.accent = "#222"),
(this.$vuetify.theme.themes.dark.background = "#333"); (this.$vuetify.theme.themes.dark.background = "#333");
} }
} else { } else {

14
NUXT/pages/mods/theme.vue
View file

@ -63,7 +63,7 @@ export default {
watch: { watch: {
accentColor: function (val) { accentColor: function (val) {
this.$vuetify.theme.currentTheme.primary = val; this.$vuetify.theme.currentTheme.primary.base = val;
let primaryAlt = this.$vuetube.hexToRgb(val); let primaryAlt = this.$vuetube.hexToRgb(val);
let rgbEdit = 130; //Light Mode let rgbEdit = 130; //Light Mode
@ -81,12 +81,12 @@ export default {
primaryAlt.b primaryAlt.b
); );
this.$vuetify.theme.currentTheme.primaryAlt = primaryAlt; this.$vuetify.theme.currentTheme.primary.lighten2 = primaryAlt;
}, },
}, },
mounted() { mounted() {
this.accentColor = this.$vuetify.theme.themes.dark.primary; this.accentColor = this.$vuetify.theme.themes.dark.primary.base;
this.roblox = localStorage.getItem("roblox") === "true"; this.roblox = localStorage.getItem("roblox") === "true";
}, },
@ -94,17 +94,13 @@ export default {
amoled() { amoled() {
this.$vuetify.theme.themes.dark.background === "#000" this.$vuetify.theme.themes.dark.background === "#000"
? ((this.$vuetify.theme.themes.dark.accent = "#222"), ? ((this.$vuetify.theme.themes.dark.accent = "#222"),
(this.$vuetify.theme.themes.dark.accent2 = "#222"), (this.$vuetify.theme.themes.dark.accent = "#222"),
(this.$vuetify.theme.themes.dark.background = "#333"), (this.$vuetify.theme.themes.dark.background = "#333"),
localStorage.setItem("isOled", false)) localStorage.setItem("isOled", false))
: ((this.$vuetify.theme.themes.dark.accent = "#000"), : ((this.$vuetify.theme.themes.dark.accent = "#000"),
(this.$vuetify.theme.themes.dark.accent2 = "#000"), (this.$vuetify.theme.themes.dark.accent = "#000"),
(this.$vuetify.theme.themes.dark.background = "#000"), (this.$vuetify.theme.themes.dark.background = "#000"),
localStorage.setItem("isOled", true)); localStorage.setItem("isOled", true));
// doesn't work 😭
// console.log(document.getElementsByClassName('v-application--wrap')[0])
// console.log(document.getElementsByClassName('v-application--wrap')[0].style)
// document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
}, },
saveTheme(isDark) { saveTheme(isDark) {
this.$vuetube.statusBar.setBackground( this.$vuetube.statusBar.setBackground(

15
NUXT/pages/search.vue
View file

@ -1,13 +1,12 @@
<template> <template>
<div> <div class="accent">
<center v-if="videos.length == 0"> <center v-if="videos.length == -1">
<v-skeleton-loader type="card-avatar, article, actions" /> <v-skeleton-loader type="card-avatar, article, actions" />
<v-skeleton-loader type="card-avatar, article, actions" /> <v-skeleton-loader type="card-avatar, article, actions" />
</center> </center>
<v-list-item v-for="(video, index) in videos" :key="index"> <v-list-item v-for="(video, index) in videos" :key="index" class="pa-0">
<v-card class="entry" :to="`/watch?v=${video.id}`"> <v-card class="entry background" :to="`/watch?v=${video.id}`" flat>
<v-card-text>
<div style="position: relative"> <div style="position: relative">
<v-img :src="video.thumbnails[video.thumbnails.length - 1].url" /> <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
<div <div
@ -16,7 +15,8 @@
v-text="video.runtime" v-text="video.runtime"
/> />
</div> </div>
<div style="margin-top: 0.5em" v-text="video.title" /> <div class="px-4 pt-4" v-text="video.title" />
<v-card-text class="pt-0">
<div v-text="`${video.views} • ${video.uploaded}`" /> <div v-text="`${video.views} • ${video.uploaded}`" />
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -26,7 +26,6 @@
<style scoped> <style scoped>
.entry { .entry {
margin-top: 1em;
width: 100%; /* Prevent Loading Weirdness */ width: 100%; /* Prevent Loading Weirdness */
} }
.videoRuntimeFloat { .videoRuntimeFloat {
@ -35,7 +34,7 @@
right: 10px; right: 10px;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border-radius: 5px; border-radius: 5px;
padding: 0 3px 0 3px; padding: 0px 4px 0px 4px;
} }
</style> </style>

25
NUXT/pages/watch.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<div> <div>
<video controls autoplay :src="vidSrc" width="100%" height="300vh" /> <video controls autoplay :src="vidSrc" width="100%" style="max-height: 50vh" />
<v-card class="ml-2 mr-2 flat light" flat> <v-card class="ml-2 mr-2 background" flat>
<v-card-title <v-card-title class="mt-2"
style="padding-top: 0; padding-bottom: 0; font-size: 0.95em" style="padding-top: 0; padding-bottom: 0; font-size: 0.95rem; line-height: 1rem;"
v-text="title" v-text="title"
/> />
<v-card-text> <v-card-text>
<div style="margin-bottom: 1em">{{ views }} views • {{ uploaded }}</div> <div style="margin-bottom: 1rem;">{{ views }} views • {{ uploaded }}</div>
<!-- Scrolling Div For Interactions ---> <!-- Scrolling Div For Interactions --->
<div style="display: flex; margin-bottom: 1em"> <div style="display: flex; margin-bottom: 1em">
@ -25,7 +25,7 @@
@click="item.action" @click="item.action"
> >
<v-icon v-text="item.icon" /> <v-icon v-text="item.icon" />
<div v-text="item.value || item.name" /> <div class="mt-2" style="font-size: .66rem;" v-text="item.value || item.name" />
</v-btn> </v-btn>
</v-list-item> </v-list-item>
@ -36,9 +36,8 @@
</v-btn> </v-btn>
</div> </div>
<!-- End Scrolling Div For Interactions ---> <!-- End Scrolling Div For Interactions --->
<hr /> <!-- <hr /> -->
<p>Channel Stuff</p> <p>Channel Stuff</p>
<hr />
</v-card-text> </v-card-text>
<div v-if="showMore" class="scroll-y ml-2 mr-2"> <div v-if="showMore" class="scroll-y ml-2 mr-2">
{{ description }} {{ description }}
@ -46,7 +45,7 @@
<v-bottom-sheet <v-bottom-sheet
v-model="showMore" v-model="showMore"
color="accent2" color="accent"
style="z-index: 9999999" style="z-index: 9999999"
> >
<v-sheet style="padding: 1em"> <v-sheet style="padding: 1em">
@ -59,7 +58,7 @@
</div> </div>
</v-sheet> </v-sheet>
</v-bottom-sheet> </v-bottom-sheet>
<!-- <v-bottom-sheet v-model="share" color="accent2" style="z-index: 9999999"> <!-- <v-bottom-sheet v-model="share" color="accent" style="z-index: 9999999">
<v-sheet style="padding: 1em"> <v-sheet style="padding: 1em">
<div class="scroll-y"> <div class="scroll-y">
{{ description }} {{ description }}
@ -86,21 +85,21 @@ export default {
interactions: [ interactions: [
{ {
name: "Likes", name: "Likes",
icon: "mdi-thumb-up", icon: "mdi-thumb-up-outline",
action: null, action: null,
value: this.likes, value: this.likes,
disabled: true, disabled: true,
}, },
{ {
name: "Dislikes", name: "Dislikes",
icon: "mdi-thumb-down", icon: "mdi-thumb-down-outline",
action: this.dislike(), action: this.dislike(),
value: this.dislikes, value: this.dislikes,
disabled: true, disabled: true,
}, },
{ {
name: "Share", name: "Share",
icon: "mdi-share", icon: "mdi-share-outline",
action: this.share(), action: this.share(),
disabled: true, disabled: true,
}, },

12
ios/App/Podfile
View file

@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios' pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios' pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http' pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app' pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser' pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device' pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen' pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar' pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
end end
target 'App' do target 'App' do