etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-21 18:55:16 +00:00
Code Issues Projects Releases Wiki Activity

theme bugfixes & startup cleanup

Browse source
This commit is contained in:
Nikita Krupin 2022-03-31 17:26:53 -04:00
parent 0a370a8f3b
commit e5fb705d42
10 changed files with 171 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
NUXT/pages/index.vue
View file

@ -1,5 +1,5 @@
<template>
<center v-show="themeFetched" class="container">
<center class="container">
<v-img
src="/icon.svg"
width="10rem"
@ -18,20 +18,12 @@ export default {
layout: "empty",
data: () => ({
progressMsg: "Theming",
themeFetched: false,
progressMsg: "Fetching the API",
}),
beforeCreate() {
this.$store.commit("tweaks/initTweaks");
// This has to be imported here,otherwise NUXT won't import the package because its so early in the lifecycle -Front
// const { SplashScreen } = await require("@capacitor/splash-screen");
// await SplashScreen.hide();
},
async mounted() {
// Set timeout is required for $vuetify.theme... dont ask me why -Front
this.$store.commit("tweaks/initTweaks");
const theming = new Promise((resolve) =>
// Set timeout is required for $vuetify.theme... dont ask me why -Front
setTimeout(() => {
this.$vuetify.theme.dark = JSON.parse(localStorage.getItem("darkTheme")) === true;
if (localStorage.getItem("primaryDark") != null)
@ -42,7 +34,6 @@ export default {
this.$vuetify.theme.themes.dark.background = localStorage.getItem("backgroundDark");
if (localStorage.getItem("backgroundLight") != null)
this.$vuetify.theme.themes.light.background = localStorage.getItem("backgroundLight");
this.themeFetched = true;
this.$vuetube.navigationBar.setTheme(
this.$vuetify.theme.currentTheme.background,
!this.$vuetify.theme.dark
@ -56,7 +47,6 @@ export default {
);
await theming;
this.progressMsg = "Fetching the API";
await this.$youtube.getAPI();
this.progressMsg = "Navigating Home";
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
@ -66,13 +56,11 @@ export default {
<style scoped>
.container {
padding-top: 3em;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -80%);
transform: translate(-50%, -50%);
}
.intro {
opacity: 0;

8
NUXT/pages/library.vue
View file

@ -1,16 +1,16 @@
<template>
<center>
<center class="px-4">
<v-img
contain
style="margin-top: 5em; max-width: 80%; max-height: 15em"
src="/dev.svg"
/>
<h1
class="background--text"
<h2
class="background--text mt-4"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
>
Page Under Construction
</h1>
</h2>
<p
class="background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"

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

@ -1,19 +1,8 @@
<template>
<client-only>
<div class="d-flex flex-column justify-end" style="min-height: 100%">
<!-- <div
class="py-1 mt-4 background"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
/> -->
<h4 class="mx-8 mt-6 my-2">Colors</h4>
<!-- <h4 class="mx-8 mt-6 my-2">Background Colors</h4> -->
<v-radio-group
v-model="$vuetify.theme.currentTheme.background"
class="mt-0"
>
<!-- @change="theme(backgroundColor)" -->
<!-- ----------------------------------------------Background Colors------------------------ -->
<v-radio-group v-model="$vuetify.theme.currentTheme.background">
<div
class="d-flex flex-row px-6 no-wrap"
style="max-width: 100%; overflow-x: auto"
@ -54,29 +43,15 @@
class="py-4 px-4 ma-2 rounded-lg"
:value="$vuetify.theme.dark ? experimentalDark : experimentalLight"
/>
Adaptive <br />
<div
class="background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
style="font-size: 0.5rem"
>
(Experimental)
</div>
Adaptive
</div>
</div>
</v-radio-group>
<!-- <h4 class="mx-8 mt-6 my-2">Accent Colors</h4> -->
<v-radio-group
v-model="$vuetify.theme.currentTheme.primary"
style="margin-top: -1.5rem"
class="mx-2"
@change="adapt"
>
<!-- ----------------------------------------------Primary Colors------------------------ -->
<v-radio-group v-model="$vuetify.theme.currentTheme.primary" class="mx-2">
<div
class="d-flex flex-row px-6 no-wrap py-3 align-center"
style="max-width: 100%; overflow-x: auto"
class="d-flex flex-row px-6 py-2 no-wrap align-center"
style="max-width: 100%; overflow-x: auto; margin-top: -1.5rem"
>
<v-radio
v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
@ -119,13 +94,11 @@
dot-size="50"
mode="hexa"
flat
>
<!-- @input="(value) => primarySwitch(value)" -->
</v-color-picker>
/>
</v-dialog>
</div>
</v-radio-group>
<!-- ----------------------------------------------Mode Switch------------------------ -->
<v-card
flat
class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
@ -143,21 +116,18 @@
</div>
<v-spacer />
<v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
<!-- @input="(value) => primarySwitch(value)" -->
</v-card>
</div>
</client-only>
</template>
<script>
export default {
data() {
return {
primaryLight: ["#E57373", "#8b5f37", "#016a49", "#34495E"],
primaryDark: ["#B71C1C", "#FFBBFF", "#AAAFFF", "#AAFFFF", "#7CD6AF", "#FEC89B"],
primaryLight: ["#E57373", "#F88469", "#22AA22", "#4A9E90", "#777FFF"],
backgroundsDark: [
{ name: "Dark", color: "#181818" },
{ name: "Black", color: "#000000" },
],
backgroundsDark: [{ name: "Dark", color: "#181818" }, { name: "Black", color: "#000000" }],
backgroundsLight: [{ name: "Normal", color: "#ffffff" }],
experimentalLight: "",
experimentalDark: "",
@ -165,24 +135,9 @@ export default {
};
},
watch: {
"$vuetify.theme.currentTheme.primary": {
handler: function (value) {
this.$vuetify.theme.dark
? localStorage.setItem("primaryDark", value)
: localStorage.setItem("primaryLight", value);
let tempD = this.experimentalDark;
let tempL = this.experimentalLight;
this.$nextTick(() => {
this.adapt();
if (this.$vuetify.theme.currentTheme.background === tempD)
this.$vuetify.theme.currentTheme.background = this.experimentalDark;
if (this.$vuetify.theme.currentTheme.background === tempL)
this.$vuetify.theme.currentTheme.background =
this.experimentalLight;
});
},
immediate: false,
// deep: true,
// also triggers background and primary watcher, unless primary colors match
"$vuetify.theme.dark"(value) {
localStorage.setItem("darkTheme", value);
},
"$vuetify.theme.currentTheme.background"(value) {
this.$vuetify.theme.dark
@ -191,22 +146,38 @@ export default {
this.$vuetube.statusBar.setTheme(value, this.$vuetify.theme.dark);
this.$vuetube.navigationBar.setTheme(value, !this.$vuetify.theme.dark);
},
"$vuetify.theme.dark"(value) {
localStorage.setItem("darkTheme", value);
"$vuetify.theme.currentTheme.primary"(value) {
if (value != undefined) {
this.$vuetify.theme.dark
? localStorage.setItem("primaryDark", value)
: localStorage.setItem("primaryLight", value);
let tempD = this.experimentalDark;
let tempL = this.experimentalLight;
this.adapt();
if (this.$vuetify.theme.currentTheme.background === tempD)
this.$vuetify.theme.currentTheme.background = this.experimentalDark;
if (this.$vuetify.theme.currentTheme.background === tempL)
this.$vuetify.theme.currentTheme.background = this.experimentalLight;
}
},
},
beforeMount() {
this.adapt();
},
methods: {
adapt() {
let hexR = window
.getComputedStyle(document.documentElement)
.getPropertyValue("--v-primary-darken4");
let hexL = window
.getComputedStyle(document.documentElement)
.getPropertyValue("--v-primary-lighten4");
let hexD = getComputedStyle(document.documentElement).getPropertyValue("--v-primary-darken4");
let hexL = getComputedStyle(document.documentElement).getPropertyValue("--v-primary-lighten4");
// the menace above returns a hex string with A SPACE " " in front of it, that's why substring(1)
// the SPACE " " is stored as part of the CSS variable itself to be used for chaining
this.experimentalDark = hexR.substring(1);
this.experimentalLight = hexL.substring(1);
this.experimentalDark = hexD.substring(1).toUpperCase();
this.experimentalLight = hexL.substring(1).toUpperCase();
setTimeout(() => {
if (this.$vuetify.theme.currentTheme.background == hexD.substring(1).toUpperCase())
this.$vuetify.theme.currentTheme.background = this.experimentalDark;
if (this.$vuetify.theme.currentTheme.background == hexL.substring(1).toUpperCase())
this.$vuetify.theme.currentTheme.background = this.experimentalLight;
}, 0);
},
saveTheme() {
navigator.vibrate([10, 100, 5]);

4
NUXT/pages/mods/tweaks.vue
View file

@ -2,13 +2,13 @@
<div class="d-flex flex-column justify-end" style="min-height: 100%">
<v-card
flat
class="px-4 ma-4 mt-2 background"
class="px-6 ma-4 mt-2 background"
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
:style="{
borderRadius: `${roundTweak / 2}rem`,
}"
>
<h3 class="mt-4">Rounded Corners</h3>
<h3 class="mt-5">Rounded Corners</h3>
<div
class="background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"

8
NUXT/pages/subscriptions.vue
View file

@ -1,16 +1,16 @@
<template>
<center>
<center class="px-4">
<v-img
contain
style="margin-top: 5em; max-width: 80%; max-height: 15em"
src="/dev.svg"
/>
<h1
class="background--text"
<h2
class="background--text mt-4"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
>
Page Under Construction
</h1>
</h2>
<p
class="background--text"
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"

2
android/.idea/deploymentTargetDropDown.xml
View file

@ -12,6 +12,6 @@
</deviceKey>
</Target>
</targetSelectedWithDropDown>
<timeTargetWasSelectedWithDropDown value="2022-03-30T18:40:14.226129Z" />
<timeTargetWasSelectedWithDropDown value="2022-03-31T17:44:52.270258Z" />
</component>
</project>

14
android/app/src/main/assets/capacitor.config.json
View file

@ -10,19 +10,17 @@
"android": {
"backgroundColor": "#000000"
},
"ios": {
"backgroundColor": "#000000"
},
"plugins": {
"SplashScreen": {
"launchShowDuration": 0,
"launchAutoHide": true,
"backgroundColor": "#000000",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#000000",
"showSpinner": false,
"splashFullScreen": false,
"splashImmersive": false
"splashImmersive": false,
"launchAutoHide": true,
"showSpinner": false
}
}
}

15
capacitor.config.json
View file

@ -12,21 +12,18 @@
"android": {
"backgroundColor": "#000000"
},
"ios": {
"backgroundColor": "#000000"
},
"plugins": {
"SplashScreen": {
"launchShowDuration": 0,
"launchAutoHide": true,
"backgroundColor": "#000000",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#000000",
"showSpinner": false,
"splashFullScreen": false,
"splashImmersive": false
"splashImmersive": false,
"launchAutoHide": true,
"showSpinner": false
}
}
}

14
ios/App/App/capacitor.config.json
View file

@ -10,19 +10,17 @@
"android": {
"backgroundColor": "#000000"
},
"ios": {
"backgroundColor": "#000000"
},
"plugins": {
"SplashScreen": {
"launchShowDuration": 0,
"launchAutoHide": true,
"backgroundColor": "#000000",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#000000",
"showSpinner": false,
"splashFullScreen": false,
"splashImmersive": false
"splashImmersive": false,
"launchAutoHide": true,
"showSpinner": false
}
}
}

BIN
resources/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 131 KiB