v3.1.0-beta.2

Author: DestroyCom

components/custom/GetterInput.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { searchQuery } from "@/functions/getYoutubeUrl";
 import clsx from "clsx";
 import { ClipboardCopy } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -40,11 +41,10 @@ export const GetterInput = () => {
     };
   };
 
-  const submitUrl = (url: string) => {
-    if (url.length === 0) {
-      return;
-    }
-    router.push(`/fetch?videoUrl=${url}`);
+  const submitUrl = async (url: string) => {
+    const getUrl = await searchQuery(url);
+
+    router.push(`/fetch?videoUrl=${getUrl}`);
   };
 
   return (
@@ -59,18 +59,18 @@ export const GetterInput = () => {
       <div className="relative my-4 w-full">
         <input
           type="text"
-          placeholder="Enter video url"
+          placeholder="https://www.youtube.com/watch?v= - https://youtu.be/ - keywords"
           id="video-url"
           name="video-url"
-          className="block w-full rounded-full border border-[#081721] bg-[#081721] p-2.5 text-white focus:border-blue-500 focus:ring-blue-500"
+          className="block w-full rounded-md border border-[#081721] bg-[#081721] p-2.5 text-white focus:border-blue-500 focus:ring-blue-500"
           value={url}
           onChange={(e) => setUrl(e.target.value)}
         />
         <button
           type="button"
           id="clipboard-copy"
           className={clsx(
-            "absolute inset-y-0 right-0 flex items-center overflow-hidden rounded-r-full bg-secondary pl-2 pr-3.5 transition-all",
+            "absolute inset-y-0 right-0 flex items-center overflow-hidden rounded-r-md bg-secondary px-4 transition-all",
             permission ? "opacity-100" : "bg-secondary/25",
             "hover:pointer-events-auto hover:cursor-pointer hover:bg-secondary/60 hover:opacity-100"
           )}
@@ -90,7 +90,7 @@ export const GetterInput = () => {
       <button
         type="submit"
         id="search-button"
-        className="border-1 m-auto mx-auto rounded-full border border-solid border-transparent bg-[#205D83] px-5 py-2.5 text-center text-lg font-medium text-white transition-all duration-200 ease-in-out hover:cursor-pointer hover:border-[#205D83] hover:bg-[#102F42] hover:ring-[#205D83] focus:outline-none focus:ring-2 focus:ring-blue-300 sm:w-auto disabled:opacity-50"
+        className="border-1 m-auto mx-auto rounded-md border border-solid border-transparent bg-[#205D83] px-5 py-2.5 text-center text-lg font-medium text-white transition-all duration-200 ease-in-out hover:cursor-pointer hover:border-[#205D83] hover:bg-[#102F42] hover:ring-[#205D83] focus:outline-none focus:ring-2 focus:ring-blue-300 sm:w-auto disabled:opacity-50"
         disabled={url.length === 0}
       >
         {false ? "Loading..." : "Search"}

components/custom/VideoSelect.tsx

@@ -110,8 +110,8 @@ export const VideoSelect = () => {
     return (
       <section className="py-8" id="error-search">
         <div className="mx-auto my-2 flex h-auto min-h-40 w-11/12 rounded-lg border-2 border-dashed border-[#102F42]">
-          <p className="m-auto mx-auto text-center font-bold text-red-800 md:text-xl">
-            {error ? error : "An error occured"}
+          <p className="m-auto mx-auto text-center font-bold text-white md:text-xl">
+            ERROR: {error ? error : "An error occured"}
           </p>
         </div>
       </section>
@@ -246,7 +246,7 @@ export const VideoSelect = () => {
             )}
 
             {downloadError && (
-              <p className="my-auto mx-auto text-center font-bold text-red-700 md:text-xl">
+              <p className="my-auto mx-auto text-center font-bold text-white md:text-xl">
                 {downloadError}
               </p>
             )}

functions/getYoutubeUrl.ts

@@ -0,0 +1,19 @@
+"use server";
+
+import { yt_validate } from "@/lib/serverUtils";
+import ytsr from "@distube/ytsr";
+
+export const searchQuery = async (query: string) => {
+  if (await yt_validate(query)) {
+    return query;
+  }
+
+  const search = await ytsr(query, { limit: 1 });
+
+  if (search.items.length === 0) {
+    throw new Error("No video found");
+  }
+
+  const video = search.items[0];
+  return video.url;
+};

lib/serverUtils.ts

@@ -67,3 +67,27 @@ export async function sanitizeFilename(filename: string) {
     .replace(/\s+/g, "_")
     .slice(0, 255);
 }
+
+const video_id_pattern = /^[a-zA-Z\d_-]{11,12}$/;
+const video_pattern =
+  /^((?:https?:)?\/\/)?(?:(?:www|m|music)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|shorts\/|embed\/|live\/|v\/)?)([\w\-]+)(\S+)?$/;
+export async function yt_validate(url: string): Promise<"video" | false> {
+  const url_ = url.trim();
+  if (url_.indexOf("list=") === -1) {
+    if (url_.startsWith("https")) {
+      if (url_.match(video_pattern)) {
+        let id: string;
+        if (url_.includes("youtu.be/"))
+          id = url_.split("youtu.be/")[1].split(/(\?|\/|&)/)[0];
+        else if (url_.includes("youtube.com/embed/"))
+          id = url_.split("youtube.com/embed/")[1].split(/(\?|\/|&)/)[0];
+        else if (url_.includes("youtube.com/shorts/"))
+          id = url_.split("youtube.com/shorts/")[1].split(/(\?|\/|&)/)[0];
+        else id = url_.split("watch?v=")[1]?.split(/(\?|\/|&)/)[0];
+        if (id?.match(video_id_pattern)) return "video";
+        else return false;
+      } else return false;
+    }
+  }
+  return false;
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "stroygetter",
-  "version": "3.1.0-beta.1",
+  "version": "3.1.0-beta.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@distube/ytdl-core": "^4.16.0",
+    "@distube/ytsr": "^2.0.4",
     "@ffmpeg-installer/ffmpeg": "^1.1.0",
     "@icons-pack/react-simple-icons": "^10.2.0",
     "@next/third-parties": "^15.1.3",