mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-12-31 12:01:22 +00:00
fix: 🎨 improve launch animation
This commit is contained in:
Front
parent
d4d4c2c826
commit
940e4965d5
9 changed files with 100 additions and 29 deletions
|
|
@ -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}) => {
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue