feat: ✨ Allow video links to be searched

If you type a youtube link in the search bar (eg. youtu.be, youtube.com/watch, etc) you can directly open the video

136

NUXT/components/topNavigation.vue

@@ -83,6 +83,7 @@ export default {
   methods: {
     refreshRecommendations() {
       this.$emit("scroll-to-top");
+
       const continuations =
         this.$store.state.recommendedVideos[
           this.$store.state.recommendedVideos.length - 1

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/plugins/utils.js

@@ -37,9 +37,16 @@ function getCpn() {
   return result;
 }
 
+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,
   hexToRgb,
   rgbToHex,
   getCpn,
+  linkParser,
 };