Merge branch 'main' of https://github.com/Frontesque/VueTube

.github/workflows/ci.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - main
-  pull_request:
-  workflow_dispatch:
 
 env:
   NODE_VERSION: 16

NUXT/layouts/default.vue

@@ -14,9 +14,6 @@
         v-show="!search"
         class="scrollcontainer"
         style="overflow: hidden; height: calc(100vh - 8rem)"
-        :style="{
-          borderRadius: `${roundTweak / 2}rem`,
-        }"
       >
         <!-- element above removes artifacting from things like v-ripple by -->
         <!-- scrollbox below must be a standalone div -->

NUXT/nuxt.config.js

@@ -2,6 +2,7 @@
  *   Data Storage:
  *   localStorage.setItem("key", data)
  *   localStorage.getItem('key')
+ *   this.$router.push("PageName");
  */
 
 export default {

NUXT/pages/embed/_redirect_.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    Redirecting...
+  </div>
+</template>
+
+<script>
+export default {
+  layout: "empty",
+  mounted() {
+
+    this.$router.push(
+      "/watch?v="
+      + $nuxt.$route.params.redirect_
+    );
+
+  }
+}
+</script>

NUXT/pages/index.vue

@@ -18,22 +18,27 @@ export default {
   layout: "empty",
 
   data: () => ({
-    progressMsg: "Fetching the API",
+    progressMsg: "Connecting",
   }),
   async mounted() {
     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;
+        this.$vuetify.theme.dark =
+          JSON.parse(localStorage.getItem("darkTheme")) === true;
         if (localStorage.getItem("primaryDark") != null)
-          this.$vuetify.theme.themes.dark.primary = localStorage.getItem("primaryDark");
+          this.$vuetify.theme.themes.dark.primary =
+            localStorage.getItem("primaryDark");
         if (localStorage.getItem("primaryLight") != null)
-          this.$vuetify.theme.themes.light.primary = localStorage.getItem("primaryLight");
+          this.$vuetify.theme.themes.light.primary =
+            localStorage.getItem("primaryLight");
         if (localStorage.getItem("backgroundDark") != null)
-          this.$vuetify.theme.themes.dark.background = localStorage.getItem("backgroundDark");
+          this.$vuetify.theme.themes.dark.background =
+            localStorage.getItem("backgroundDark");
         if (localStorage.getItem("backgroundLight") != null)
-          this.$vuetify.theme.themes.light.background = localStorage.getItem("backgroundLight");
+          this.$vuetify.theme.themes.light.background =
+            localStorage.getItem("backgroundLight");
         this.$vuetube.navigationBar.setTheme(
           this.$vuetify.theme.currentTheme.background,
           !this.$vuetify.theme.dark
@@ -48,7 +53,8 @@ export default {
 
     await theming;
     await this.$youtube.getAPI();
-    this.progressMsg = "Navigating Home";
+    this.progressMsg = "Launching";
+
     this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
   },
 };

NUXT/pages/mods/about.vue

@@ -1,5 +1,6 @@
 <template>
-  <center style="padding: 1em">
+  <div style="padding: 1em">
+    <center>
     <div class="row pa-4" style="flex-direction: column">
       <div>
         <v-img
@@ -8,28 +9,51 @@
           :class="$vuetify.theme.dark ? '' : 'invert'"
         />
       </div>
-      <v-spacer />
-      <div>
-        <h1 class="pageTitle mb-3">VueTube</h1>
-        <v-btn @click="openExternal('https://github.com/Frontesque/VueTube')"
-          ><v-icon>mdi-github</v-icon></v-btn
-        >
-        <v-btn @click="openExternal('https://discord.gg/7P8KJrdd5W')"
-          ><v-icon>mdi-discord</v-icon></v-btn
-        >
-      </div>
+      <h1 class="pageTitle mb-3">VueTube</h1>
+    </div>
+    </center>
+
+    <!--   App Information   -->
+    <v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+      <v-card-title>App Information</v-card-title>
+      <v-card-text>
+        <h3>App Version</h3>
+        {{ version.substring(0, 7) || "Unknown" }}
+      </v-card-text>
+    </v-card>
+    <!--   End App Information   -->
+
+    <!--   Device Information   -->
+    <v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+      <v-card-title>Device Information</v-card-title>
+      <v-card-text>
+        <h3>Platform</h3>
+        {{ deviceInfo.platform || "Unknown" }}<br>
+        <h3>Operating System</h3>
+        {{ deviceInfo.operatingSystem || "Unknown" }} ({{ deviceInfo.osVersion || "Unknown" }})<br>
+        <h3>Model</h3>
+        {{ deviceInfo.model || "Unknown" }}<br>
+        <h3>Manufacturer</h3>
+        {{ deviceInfo.manufacturer || "Unknown" }}<br>
+        <h3>Emulator</h3>
+        {{ deviceInfo.isVirtual ? "yes" : "no" }}
+      </v-card-text>
+    </v-card>
+    <!--   End Device Information   -->
+
+    <!--   App Links   --->
+    <div class="obj">
+      <v-btn @click="openExternal('https://github.com/Frontesque/VueTube')" class="action"  :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+        <v-icon x-large class="actionIcon">mdi-github</v-icon>
+        Github
+      </v-btn>
+      <v-btn @click="openExternal('https://discord.gg/7P8KJrdd5W')" class="action obj"  :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+        <v-icon x-large class="actionIcon">mdi-discord</v-icon>
+        Discord
+      </v-btn>
     </div>
 
-    <h3 style="margin-top: 2em">App Information</h3>
-    <div>App Version: {{ version.substring(0, 7) }}</div>
-
-    <h3 style="margin-top: 1em">Device Information</h3>
-    <div>Platform: {{ deviceInfo.platform }}</div>
-    <div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
-    <div>Model: {{ deviceInfo.model }}</div>
-    <div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
-    <div>Emulator: {{ deviceInfo.isVirtual ? "yes" : "no" }}</div>
-  </center>
+  </div>
 </template>
 
 <script>
@@ -37,6 +61,13 @@ import { Browser } from "@capacitor/browser";
 import { Device } from "@capacitor/device";
 
 export default {
+
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    }
+  },
+
   data() {
     return {
       version: process.env.appVersion,
@@ -60,4 +91,15 @@ export default {
 .pageTitle {
   margin-bottom: 1em;
 }
+.obj {
+  margin-top: 1em;
+}
+.action {
+  min-width: 100% !important;
+  min-height: 5em;
+  padding: 0 !important;
+}
+.actionIcon {
+  margin-right: 0.5em;
+}
 </style>

NUXT/pages/mods/developer.vue

@@ -4,9 +4,9 @@
 
     <!--   Top Notice   -->
     <center style="margin: 2em;">
-      <h1>VueTube Registry</h1>
+      <h1>Registry Editor</h1>
       <v-alert text outlined type="warning">
-        MESSING WITH SETTINGS MAY CAUSE YOUR APP TO BREAK!
+        EDITING ENTRIES MAY CAUSE YOUR APP TO BREAK!
       </v-alert>
     </center>
 
@@ -20,7 +20,7 @@
 
     <!--   Registry List Loader   -->
     <v-list-item v-for="(item, index) in keys" :key="index">
-      <v-card class="card rounded-lg" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'">
+      <v-card class="card" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
         <v-card-title v-text="item.key" />
         <v-card-text v-text="item.value" />
         <v-card-actions>
@@ -104,6 +104,13 @@
 
 <script>
 export default {
+
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    }
+  },
+
   data() {
     return {
       keys: [],

NUXT/pages/mods/logs.vue

@@ -5,6 +5,7 @@
         class="card background"
         :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
         flat
+        :style="{borderRadius: `${roundTweak / 2}rem`}"
       >
         <v-card-title>
           <v-chip v-if="item.error" outlined class="errorChip" color="error"
@@ -22,6 +23,7 @@
           <v-expansion-panel
             class="background"
             :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+            :style="{borderRadius: `${roundTweak / 2}rem`}"
           >
             <v-expansion-panel-header>More</v-expansion-panel-header>
             <v-expansion-panel-content class="logContent" v-text="item.data" />
@@ -53,6 +55,11 @@
 
 <script>
 export default {
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    }
+  },
   data() {
     return {
       logs: new Array(),

NUXT/pages/mods/startup.vue

@@ -4,6 +4,7 @@
       flat
       class="pb-5 background"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :style="{borderRadius: `${roundTweak / 2}rem`}"
     >
       <v-card-title>Default Page</v-card-title>
       <v-card-text>
@@ -21,6 +22,13 @@
 
 <script>
 export default {
+
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    }
+  },
+
   data() {
     return {
       page: "home",

NUXT/pages/mods/updates.vue

@@ -5,6 +5,7 @@
         flat
         class="card my-2 background"
         :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+        :style="{ borderRadius: `${roundTweak / 2}rem` }"
       >
         <v-card-title style="padding: 0 0.25em 0 0.75em">
           {{ item.author ? item.author.login : item.commit.author.name }}
@@ -89,31 +90,23 @@
 import { Browser } from "@capacitor/browser";
 
 export default {
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    },
+  },
+
   data() {
     return {
       commits: new Array(),
       installedVersion: process.env.appVersion,
     };
   },
-  async mounted() {
-    const commits = await this.$vuetube.commits;
-    if (commits[0].sha) {
-      //If Commit Valid
-      this.commits = commits;
-    } else {
-      console.log(commits);
-    }
-  },
-  methods: {
-    async openExternal(item) {
-      await Browser.open({ url: item.html_url });
-    },
 
-    install(item) {
-      this.$vuetube.getRuns(item, (data) => {
-        console.log(data);
-      });
-    },
+  install(item) {
+    this.$vuetube.getRuns(item, (data) => {
+      console.log(data);
+    });
   },
 };
 </script>

NUXT/pages/settings.vue

@@ -14,7 +14,6 @@
 
     <!--   Dev Mode Open   -->
     <v-btn text class="entry" @click="dev()" />
-
   </div>
 </template>
 
@@ -51,7 +50,13 @@ export default {
           to: "/mods/tweaks",
         },
         { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
-        { name: "Plugins", icon: "mdi-puzzle", to: "", disabled: true },
+        {
+          name: "Plugins",
+          icon: "mdi-puzzle",
+          to: "",
+          to: "/mods/plugins",
+          disabled: true,
+        },
         {
           name: "Updates",
           icon: "mdi-cloud-download-outline",
@@ -68,7 +73,7 @@ export default {
       if (this.devClicks >= 6) {
         this.$router.push("/mods/developer");
       }
-    }
-  }
+    },
+  },
 };
 </script>

NUXT/pages/watch.vue

@@ -5,10 +5,11 @@
       style="position: sticky; top: 0; z-index: 696969"
       :vid-src="vidSrc"
       ref="player"
+      v-if="useBetaPlayer !== 'true'"
     />
 
     <!--   VueTube Player V1   -->
-    <!-- <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />-->
+    <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
 
     <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
       <v-card-title
@@ -150,11 +151,14 @@ import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import { getCpn } from "~/plugins/utils";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
+import vuetubePlayer from "~/components/Player/index.vue";
 
 export default {
   components: {
+    ShelfRenderer,
     VidLoadRenderer,
     SlimVideoDescriptionRenderer,
+    vuetubePlayer,
     ItemSectionRenderer,
   },
   data() {
@@ -191,8 +195,10 @@ export default {
       loaded: false,
       interval: null,
       video: null,
+      useBetaPlayer: false,
     };
   },
+
   watch: {
     // Watch for change in the route query string (in this case, ?v=xxxxxxxx to ?v=yyyyyyyy)
     $route: {
@@ -213,6 +219,8 @@ export default {
   mounted() {
     this.startTime = Math.floor(Date.now() / 1000);
     this.getVideo();
+
+    this.useBetaPlayer = localStorage.getItem("debug.BetaPlayer");
   },
 
   destroyed() {

NUXT/plugins/constants.js

@@ -16,9 +16,15 @@ const ytApiVal = {
   CLIENT_WEB: 2,
 };
 
+const filesystem = {
+  plugins: "vuetube/plugins",
+  temp: "vuetube/temp",
+}
+
 module.exports = {
   URLS: url,
   YT_API_VALUES: ytApiVal,
+  fs: filesystem,
   LOGGER_NAMES: {
     search: "Search",
     autoComplete: "AutoComplete",

NUXT/plugins/thirdPartyPluginLoader.js

@@ -0,0 +1,76 @@
+//---   Modules/Imports   ---//
+import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
+import { fs } from './constants';
+
+//---   Set Up App Directory   ---//
+const APP_DIRECTORY = Directory.Documents;
+
+
+const ensureStructure = new Promise(async (resolve, reject) => {
+  const perms = await Filesystem.checkPermissions();
+  if (perms.publicStorage !== "granted") {
+    perms = await Filesystem.requestPermissions();
+  }
+
+  //---   Ensure Plugins Folder   ---//
+  try {
+    await Filesystem.mkdir({ directory: APP_DIRECTORY, recursive: true,
+      path: fs.plugins,
+    });
+  } catch (e) { /* Exists */ }
+
+  //---   Ensure Temp Folder   ---//
+  try {
+    await Filesystem.mkdir({ directory: APP_DIRECTORY, recursive: true,
+      path: fs.temp,
+    });
+  } catch (e) { /* Exists */ }
+
+  perms 
+    ? resolve(true)
+    : reject(false)
+    
+})
+
+
+const module = {
+
+
+  //---   Get Plugins   ---//
+  list: new Promise(async (resolve, reject) => {
+    let plugins = new Array();
+
+    if (await !ensureStructure) reject("Invalid Structure");
+    
+    // Temp Plugin List
+    plugins = Filesystem.readdir({
+      directory: APP_DIRECTORY,
+      path: fs.plugins
+    })
+    // End Temp Plugin List
+    resolve(plugins);
+  }),
+  //---   End Get Plugins   ---//
+
+  //---   Delete Plugin   ---//
+  list: async (pluginName) => {
+
+    console.log(fs.plugins);
+    /*
+    const contents = await Filesystem.readFile({
+      path: 'secrets/text.txt',
+      directory: Directory.Documents,
+      encoding: Encoding.UTF8,
+    });
+    */
+
+  }
+
+
+
+};
+
+//---   Start   ---//
+export default ({ app }, inject) => {
+  inject("tppl", module);
+};

android/app/src/main/AndroidManifest.xml

@@ -8,7 +8,8 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+        android:theme="@style/AppTheme"
+        android:requestLegacyExternalStorage="true">
 
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"