fix: 🎨 improve launch animation

NUXT/layouts/default.vue

@@ -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}) => {
 

NUXT/pages/index.vue

@@ -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>

android/app/capacitor.build.gradle

@@ -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')
 
 }

android/app/src/main/assets/capacitor.config.json

@@ -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
+		}
 	}
 }

android/app/src/main/assets/capacitor.plugins.json

@@ -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"

android/capacitor.settings.gradle

@@ -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')

capacitor.config.json

@@ -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
     }
   }
 

ios/App/App/capacitor.config.json

@@ -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
+		}
 	}
 }

ios/App/Podfile

@@ -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