etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: 🎨 improve launch animation

This commit is contained in:
Front 2022-03-19 19:17:26 -04:00
parent d4d4c2c826
commit 940e4965d5
9 changed files with 100 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
NUXT/layouts/default.vue
View File

@ -114,31 +114,6 @@ export default {
}),
mounted() {
//--- Load Saved Theme ---//
setTimeout(() => { //Set timeout is required to make it load properly... dont ask me why -Front
const darkTheme = localStorage.getItem('darkTheme');
if (darkTheme == "true") {
this.$vuetify.theme.dark = darkTheme;
//this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.dark.accent)
const isOled = localStorage.getItem('isOled')
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'
}
} else {
//this.$vuetube.statusBar.setLight() //Looks weird -Front
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.light.accent);
}
}, 0);
//--- Back Button Listener ---//
CapacitorApp.addListener('backButton', ({canGoBack}) => {

53
NUXT/pages/index.vue
View File

@ -1,5 +1,6 @@
<template>
<center style="padding-top: 3em;">
<center class="container">
<v-img src="/icon.svg" width="10em" style="margin-bottom: 1em;" />
<v-progress-circular
size="50"
indeterminate
@ -8,12 +9,58 @@
</center>
</template>
<style scoped>
.container {
padding-top: 3em;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -80%);
}
</style>
<script>
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;
export default {
layout: "empty",
async mounted() {
await this.$youtube.getAPI()
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
//--- Hide Splash Screen ---//
SplashScreen.hide();
//-------------------------------//
//--- Theme Loader Moved From '~/layouts/default.vue' (because this only needs to be run once) -Front ---//
setTimeout(() => { //Set timeout is required to make it load properly... dont ask me why -Front
const darkTheme = localStorage.getItem('darkTheme');
if (darkTheme == "true") {
this.$vuetify.theme.dark = darkTheme;
//this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.dark.accent)
const isOled = localStorage.getItem('isOled')
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'
}
} else {
//this.$vuetube.statusBar.setLight() //Looks weird -Front
this.$vuetube.statusBar.setBackground(this.$vuetify.theme.themes.light.accent);
}
}, 0);
//-----------------------------------------------------------------------------------------------------------//
await this.$youtube.getAPI()
this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
}
}
</script>

1
android/app/capacitor.build.gradle
View File

@ -13,6 +13,7 @@ dependencies {
implementation project(':capacitor-app')
implementation project(':capacitor-browser')
implementation project(':capacitor-device')
implementation project(':capacitor-splash-screen')
implementation project(':capacitor-status-bar')
}

15
android/app/src/main/assets/capacitor.config.json
View File

@ -6,5 +6,20 @@
"server": {
"hostname": "youtube.com",
"androidScheme": "https"
},
"plugins": {
"SplashScreen": {
"launchShowDuration": 100,
"launchAutoHide": true,
"backgroundColor": "#111111",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#999999",
"showSpinner": true,
"splashFullScreen": true,
"splashImmersive": true
}
}
}

4
android/app/src/main/assets/capacitor.plugins.json
View File

@ -15,6 +15,10 @@
"pkg": "@capacitor/device",
"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
},
{
"pkg": "@capacitor/splash-screen",
"classpath": "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin"
},
{
"pkg": "@capacitor/status-bar",
"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"

3
android/capacitor.settings.gradle
View File

@ -14,5 +14,8 @@ project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/
include ':capacitor-device'
project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
include ':capacitor-splash-screen'
project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
include ':capacitor-status-bar'
project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

12
capacitor.config.json
View File

@ -11,7 +11,17 @@
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
"launchShowDuration": 100,
"launchAutoHide": true,
"backgroundColor": "#111111",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#999999",
"showSpinner": true,
"splashFullScreen": true,
"splashImmersive": true
}
}

15
ios/App/App/capacitor.config.json
View File

@ -6,5 +6,20 @@
"server": {
"hostname": "youtube.com",
"androidScheme": "https"
},
"plugins": {
"SplashScreen": {
"launchShowDuration": 100,
"launchAutoHide": true,
"backgroundColor": "#111111",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#999999",
"showSpinner": true,
"splashFullScreen": true,
"splashImmersive": true
}
}
}

1
ios/App/Podfile
View File

@ -13,6 +13,7 @@ def capacitor_pods
pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
end