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

.github/workflows/ci.yml

@@ -52,10 +52,10 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
       - name: Install dependencies
         run: npm i
-      - name: Set up JDK 1.8
+      - name: Set up JDK 11
         uses: actions/setup-java@v1
         with:
-          java-version: 1.8
+          java-version: 11
       - name: Copy web assets to native platform
         run: npx cap copy android
       - name: Update native platform

NUXT/components/topNavigation.vue

@@ -39,16 +39,18 @@
       class="ml-3 mr-1 my-auto fill-height"
       style="border-radius: 0.25rem !important"
       @click="refreshRecommendations"
-      ><v-icon>mdi-refresh</v-icon></v-btn
     >
+      <v-icon>mdi-refresh</v-icon>
+    </v-btn>
     <v-btn
       icon
       tile
       class="ml-3 my-auto fill-height"
       style="border-radius: 0.25rem !important"
       @click="$emit('search-btn', text)"
-      ><v-icon>mdi-magnify</v-icon></v-btn
     >
+      <v-icon>mdi-magnify</v-icon>
+    </v-btn>
     <v-btn
       v-show="!search"
       icon
@@ -56,8 +58,9 @@
       class="ml-4 mr-2 my-auto fill-height"
       style="border-radius: 0.25rem !important"
       to="/settings"
-      ><v-icon>mdi-cog-outline</v-icon></v-btn
     >
+      <v-icon>mdi-cog-outline</v-icon>
+    </v-btn>
   </v-card>
 </template>
 
@@ -80,6 +83,7 @@ export default {
   methods: {
     refreshRecommendations() {
       this.$emit("scroll-to-top");
+
       const continuations =
         this.$store.state.recommendedVideos[
           this.$store.state.recommendedVideos.length - 1
@@ -108,6 +112,7 @@ export default {
   position: fixed;
   width: 100%;
 }
+
 .topNavSearch {
   margin-bottom: -10em;
   margin-left: 2em;

NUXT/layouts/default.vue

@@ -45,7 +45,7 @@
                 @click="youtubeSearch(item)"
               >
                 <v-icon class="mr-5">mdi-magnify</v-icon>
-                {{ item[0] }}
+                {{ item[0] || item.text }}
               </v-btn>
             </v-list-item>
           </div>
@@ -62,7 +62,9 @@
 <script>
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";
-import constants from "../plugins/constants";
+import constants from "~/plugins/constants";
+import { linkParser } from "~/plugins/utils"
+
 export default {
   data: () => ({
     search: false,
@@ -120,6 +122,19 @@ export default {
   methods: {
     textChanged(text) {
       if (text.length <= 0) this.response = []; // No text found, no point in calling API
+
+      //---   User Pastes Link, Direct Them To Video   ---//
+      const isLink = linkParser(text);
+      if (isLink) {
+        this.response = [{
+          text: `Watch video from ID: ${isLink}`,
+          id: isLink
+        }];
+        return;
+      }
+      //---   End User Pastes Link, Direct Them To Video   ---//
+
+      //---   Auto Suggest   ---//
       this.$youtube.autoComplete(text, (res) => {
         const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
         this.response = JSON.parse(data)[1];
@@ -127,7 +142,10 @@ export default {
     },
 
     youtubeSearch(item) {
-      this.$router.push(`/search?q=${item[0]}`);
+      const link = item.id
+        ? `/watch?v=${item.id}`
+        : `/search?q=${item[0]}`
+      this.$router.push(link);
       this.search = false;
     },
 

NUXT/nuxt.config.js

@@ -15,6 +15,7 @@ export default {
     { src: "~/plugins/youtube", mode: "client" },
     { src: "~/plugins/vuetube", mode: "client" },
     { src: "~/plugins/ryd", mode: "client" },
+    { src: "~/plugins/thirdPartyPluginLoader", mode: "client" },
   ],
   generate: {
     dir: "../dist",

NUXT/pages/index.vue

@@ -49,6 +49,14 @@ export default {
     await theming;
     await this.$youtube.getAPI();
     this.progressMsg = "Navigating Home";
+    
+    //---   April First Joke   ---//
+    if (Math.floor(Math.random() * 9 == 0)) {
+      this.$router.push("/watch?v=dQw4w9WgXcQ");
+      return;
+    }
+    //----------------------------//
+    
     this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
   },
 };

NUXT/pages/mods/plugins.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <!-- sorry for the mess, I will make a dumb (styles only) standardized card component later - Nik -->
+    <div
+      v-for="(plugin, index) in plugins"
+      :key="index"
+      flat
+      class="card d-flex mb-4 background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :style="{
+        borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
+        padding:
+          $store.state.tweaks.roundTweak > 0
+            ? '.75rem 0rem .75rem 1rem'
+            : '.75rem .75rem .75rem 1.5rem',
+      }"
+    >
+      <div>
+        <v-card-title class="pa-0">
+          {{ plugin.manifest.name }}
+          {{ plugin.manifest.version }}
+        </v-card-title>
+        <v-card-text
+          class="pa-0 mb-3 background--text"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+        >
+          by {{ plugin.manifest.author }}
+          {{ plugin.manifest.license ? `(${plugin.manifest.license})` : "" }}
+        </v-card-text>
+        <v-card-text class="pa-0">
+          {{ plugin.manifest.description }}
+        </v-card-text>
+      </div>
+      <v-switch
+        disabled
+        style="pointer-events: none"
+        class="my-0"
+        persistent-hint
+        inset
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      plugins: new Array(),
+      installedVersion: process.env.appVersion,
+    };
+  },
+  async mounted() {
+    this.plugins = await this.$tppl.list;
+  },
+};
+</script>

NUXT/pages/mods/updates.vue

@@ -1,53 +1,29 @@
 <template>
   <div class="py-2">
     <v-list-item v-for="(item, index) in commits" :key="index" class="my-1">
-      <v-card
-        flat
-        class="card my-2 background"
-        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-      >
+      <v-card flat class="card my-2 background" :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'">
         <v-card-title style="padding: 0 0.25em 0 0.75em">
           {{ item.author ? item.author.login : item.commit.author.name }}
-          <span
-            class="subtitle background--text"
-            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-            v-text="`• ${item.sha.substring(0, 7)}`"
-          />
+          <span class="subtitle background--text" :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+            v-text="`• ${item.sha.substring(0, 7)}`" />
           <v-spacer />
-          <v-chip
-            v-if="index == 0"
-            class="tags"
-            color="orange"
-            style="
+          <v-chip v-if="index == 0" class="tags" color="orange" style="
               border-radius: 0.5rem;
-              border: 2px var(--v-oragnge-base);
-              margin-top: -1.5rem;
-              margin-right: -0.5rem;
-            "
-          >
+              border: 2px var(--v-orange-base);
+            ">
             Latest
           </v-chip>
-          <v-chip
-            v-if="item.sha == installedVersion"
-            class="tags"
-            color="green"
-            style="
+          <v-chip v-if="item.sha == installedVersion" class="tags" color="green" style="
               border-radius: 0.5rem;
               border: 2px var(--v-green-base);
-              margin-top: -1.5rem;
-              margin-right: -0.5rem;
-            "
-          >
-            >Installed</v-chip
-          >
+            ">
+            Installed
+          </v-chip>
         </v-card-title>
 
         <div style="margin-left: 1em">
-          <div
-            class="date background--text"
-            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-            v-text="new Date(item.commit.committer.date).toLocaleString()"
-          />
+          <div class="date background--text" :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+            v-text="new Date(item.commit.committer.date).toLocaleString()" />
           {{ item.commit.message }}
         </div>
 
@@ -66,54 +42,64 @@
 </template>
 
 <style scoped>
-.card {
-  width: 100%;
-}
-.subtitle {
-  margin: 0.4em;
-  font-size: 0.75em;
-  transform: translateY(5%);
-}
-.date {
-  transform: translateY(-40%);
-}
-.btn-icon {
-  margin-right: 0.25em;
-}
-.tags {
-  margin-left: 0.5em;
-}
+  .card {
+    width: 100%;
+  }
+
+  .subtitle {
+    margin: 0.4em;
+    font-size: 0.75em;
+    transform: translateY(5%);
+  }
+
+  .date {
+    transform: translateY(-40%);
+  }
+
+  .btn-icon {
+    margin-right: 0.25em;
+  }
+
+  .tags {
+    margin-left: 0.5em;
+  }
+
 </style>
 
 <script>
-import { Browser } from "@capacitor/browser";
+  import {
+    Browser
+  } from "@capacitor/browser";
 
-export default {
-  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 });
+  export default {
+    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

@@ -51,7 +51,7 @@ 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" },
         {
           name: "Updates",
           icon: "mdi-cloud-download-outline",

NUXT/plugins/tempPlugins/demoPlugin.js

@@ -0,0 +1,30 @@
+module.exports = {
+  manifest: {
+    name: "Test plugin", // Required
+    vuetube: "*",
+    version: "1.0", // Required
+    author: "Frontesque", // Required
+    description: "A plugin to test how vuetube handles plugins // Add 'Hello, World!' to the home page.", // Required
+    homepage: "https://github.com/Frontesque/VueTube-Example-Plugin",
+    license: "GPL-3.0" // Required
+  },
+
+  /************************* 
+   * Execute code on ALL VueTube pages
+   ************************/
+  global: function() {
+
+  },
+
+  /************************* 
+   * Execute code on SPECIFIC VueTube pages
+   * 
+   * You can view what page you intend to inject code into by looking at `~/NUXT/pages/` in the main VueTube repo
+   ************************/
+  pages: {
+    home: function() { // Execute code on JUST the home page
+
+    }
+  }
+
+}

NUXT/plugins/thirdPartyPluginLoader.js

@@ -0,0 +1,26 @@
+//---   Modules/Imports   ---//
+
+const module = {
+
+
+  //---   Get Plugins   ---//
+  list: new Promise((resolve, reject) => {
+    let plugins = new Array();
+    
+    // Temp Plugin List
+    plugins.push(require("~/plugins/tempPlugins/demoPlugin"))
+    // End Temp Plugin List
+
+    resolve(plugins);
+
+  })
+  //---   End Get Plugins   ---//
+
+
+
+};
+
+//---   Start   ---//
+export default ({ app }, inject) => {
+  inject("tppl", module);
+};

NUXT/plugins/utils.js

@@ -17,10 +17,10 @@ function hexToRgb(hex) {
   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16),
+    }
     : null;
 }
 
@@ -41,6 +41,12 @@ function getMutationByKey(key, mutations) {
   if (!key || !mutations) return undefined;
   return mutations.find((mutation) => mutation.entityKey === key).payload;
 }
+function linkParser(url) {
+
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  var match = url.match(regExp);
+  return (match && match[7].length == 11) ? match[7] : false;
+}
 
 module.exports = {
   getBetweenStrings,
@@ -48,4 +54,5 @@ module.exports = {
   rgbToHex,
   getCpn,
   getMutationByKey,
+  linkParser,
 };

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-filesystem')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')

android/app/release/output-metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": 2,
+  "version": 3,
   "artifactType": {
     "type": "APK",
     "kind": "Directory"
@@ -10,9 +10,11 @@
     {
       "type": "SINGLE",
       "filters": [],
+      "attributes": [],
       "versionCode": 1,
       "versionName": "1.0",
       "outputFile": "app-release.apk"
     }
-  ]
+  ],
+  "elementType": "File"
 }

android/app/src/main/AndroidManifest.xml

@@ -52,6 +52,8 @@
     </application>
 
     <!-- Permissions -->
-
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    
 </manifest>

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

@@ -15,6 +15,10 @@
 		"pkg": "@capacitor/device",
 		"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
 	},
+	{
+		"pkg": "@capacitor/filesystem",
+		"classpath": "com.capacitorjs.plugins.filesystem.FilesystemPlugin"
+	},
 	{
 		"pkg": "@capacitor/haptics",
 		"classpath": "com.capacitorjs.plugins.haptics.HapticsPlugin"

android/build.gradle

@@ -7,8 +7,8 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.2.1'
-        classpath 'com.google.gms:google-services:4.3.5'
+        classpath 'com.android.tools.build:gradle:7.1.2'
+        classpath 'com.google.gms:google-services:4.3.10'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/capacitor.settings.gradle

@@ -14,6 +14,9 @@ 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-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

ios/App/Podfile

@@ -9,15 +9,16 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
-  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
-  pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
-  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
-  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'HugotomaziCapacitorNavigationBar', :path => '../../node_modules/@hugotomazi/capacitor-navigation-bar'
+  pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
+  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
+  pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
+  pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
+  pod 'CapacitorFilesystem', :path => '..\..\node_modules\@capacitor\filesystem'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorShare', :path => '..\..\node_modules\@capacitor\share'
+  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'HugotomaziCapacitorNavigationBar', :path => '..\..\node_modules\@hugotomazi\capacitor-navigation-bar'
 end
 
 target 'App' do

package.json

@@ -7,6 +7,7 @@
     "@capacitor/cli": "^3.4.0",
     "@capacitor/core": "^3.4.0",
     "@capacitor/device": "^1.1.2",
+    "@capacitor/filesystem": "^1.1.0",
     "@capacitor/haptics": "^1.1.4",
     "@capacitor/share": "^1.1.2",
     "@capacitor/splash-screen": "^1.2.2",