(feat): now pytubepp helper can install required packages via install buttons using winget and pip

package-lock.json

@@ -14,6 +14,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "dotenv": "^16.4.5",
+        "lucide-react": "^0.436.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "tailwind-merge": "^2.5.2",
@@ -2141,6 +2142,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.436.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.436.0.tgz",
+      "integrity": "sha512-N292bIxoqm1aObAg0MzFtvhYwgQE6qnIOWx/GLj5ONgcTPH6N0fD9bVq/GfdeC9ZORBXozt/XeEKDpiB3x3vlQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
+    "lucide-react": "^0.436.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.5.2",

src-tauri/pytubepp-helper-msghost.json

@@ -3,5 +3,5 @@
     "description": "A helper app for pytubepp-extention to communicate with pytubepp-cli",
     "path": "pytubepp-helper-msghost.exe",
     "type": "stdio",
-    "allowed_origins": ["chrome-extension://adebedkaedobamilbbobbajepnnkkfcg/"]
+    "allowed_origins": ["chrome-extension://adebedkaedobamilbbobbajepnnkkfcg/", "chrome-extension://mmhhbpdhkogpcieblpdilflfoimajepp"]
 }

src-tauri/src/main.rs

@@ -83,6 +83,40 @@ fn fetch_video_info(url: String) {
     }
 }
 
+#[tauri::command]
+fn install_program(installer: String ,program: String) {
+    #[cfg(target_os = "windows")]
+    {
+        let command = format!("{} install {}", &installer, &program);
+        Command::new("cmd")
+            .args(["/k", command.as_str()])
+            .spawn()
+            .unwrap();
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+        let command = format!("{} install {}", &installer, &program);
+        Command::new("gnome-terminal")
+            .args(["--", command.as_str()])
+            .spawn()
+            .unwrap();
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        let command = format!("{} install {}", &installer, &program);
+        Command::new("osascript")
+            .arg("-e")
+            .arg(format!(
+                "tell app \"Terminal\" to activate do script \"{}\"",
+                command
+            ))
+            .spawn()
+            .unwrap();
+    }
+}
+
 #[tauri::command]
 fn download_stream(url: String, stream: String) {
     #[cfg(target_os = "windows")]
@@ -173,6 +207,7 @@ async fn main() {
             // handle_websocket_message,
             send_to_extension,
             fetch_video_info,
+            install_program,
             download_stream,
             receive_frontend_response
         ])

src-tauri/tauri.conf.json

@@ -19,13 +19,18 @@
         "open": true,
         "scope": [
           {
-            "name": "is-pytubepp-installed",
+            "name": "is-winget-installed",
-            "cmd": "pytubepp",
+            "cmd": "winget",
             "args": ["--version"]
           },
           {
-            "name": "is-pytubefix-installed",
+            "name": "is-python-installed",
-            "cmd": "pytubefix",
+            "cmd": "python",
+            "args": ["--version"]
+          },
+          {
+            "name": "is-pip-installed",
+            "cmd": "pip",
             "args": ["--version"]
           },
           {
@@ -34,8 +39,8 @@
             "args": ["-version"]
           },
           {
-            "name": "is-python-installed",
+            "name": "is-pytubepp-installed",
-            "cmd": "python",
+            "cmd": "pytubepp",
             "args": ["--version"]
           },
           {
@@ -75,7 +80,7 @@
       {
         "title": "PytubePP Helper",
         "width": 500,
-        "height": 300
+        "height": 320
       }
     ],
     "security": {

src/App.tsx

@@ -5,8 +5,10 @@ import { listen } from '@tauri-apps/api/event';
 import { appWindow } from '@tauri-apps/api/window';
 import { ThemeProvider } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { InstalledPrograms, WebSocketMessage, } from "./types";
-import { extract_version, is_installed, sendStreamInfo } from "./lib/utils";
+import { compareVersions, extract_version, is_installed, sendStreamInfo } from "./lib/utils";
+import { CircleCheck, TriangleAlert, CircleAlert } from 'lucide-react';
 
 function App() {
   useEffect(() => {
@@ -19,15 +21,19 @@ function App() {
   }, []);
   
   const [installedPrograms, setInstalledPrograms] = useState<InstalledPrograms>({
+    winget: {
+      installed: false,
+      version: null,
+    },
     python: {
       installed: false,
       version: null,
     },
-    ffmpeg: {
+    pip: {
       installed: false,
       version: null,
     },
-    pytubefix: {
+    ffmpeg: {
       installed: false,
       version: null,
     },
@@ -66,6 +72,15 @@ function App() {
   }, []);
 
   function check_all_programs() {
+    is_installed('winget', '--version').then((result) => {
+      setInstalledPrograms((prevState) => ({
+        ...prevState,
+        winget: {
+          installed: result.installed,
+          version: result.output ? extract_version(result.output) : null,
+        }
+      }));
+    });
     is_installed('python', '--version').then((result) => {
       setInstalledPrograms((prevState) => ({
         ...prevState,
@@ -75,19 +90,19 @@ function App() {
         }
       }));
     });
-    is_installed('ffmpeg', '-version').then((result) => {
+    is_installed('pip', '--version').then((result) => {
       setInstalledPrograms((prevState) => ({
         ...prevState,
-        ffmpeg: {
+        pip: {
           installed: result.installed,
           version: result.output ? extract_version(result.output) : null,
         }
       }));
     });
-    is_installed('pytubefix', '--version').then((result) => {
+    is_installed('ffmpeg', '-version').then((result) => {
       setInstalledPrograms((prevState) => ({
         ...prevState,
-        pytubefix: {
+        ffmpeg: {
           installed: result.installed,
           version: result.output ? extract_version(result.output) : null,
         }
@@ -114,13 +129,39 @@ function App() {
       <div className="container">
         <div className="topbar flex justify-between items-center mt-5">
           <h1 className="text-xl font-bold">PytubePP Helper</h1>
-          <Button size="sm" onClick={check_all_programs}>Re-Check</Button>
+          <Button size="sm" onClick={check_all_programs}>Refresh</Button>
         </div>
         <div className="programstats mt-5">
-          <p><b>Python:</b> {installedPrograms.python.installed ? 'installed' : 'not installed'} {installedPrograms.python.version ? `(${installedPrograms.python.version})` : ''}</p>
+          <div className="programitem flex items-center justify-between">
-          <p><b>FFmpeg:</b> {installedPrograms.ffmpeg.installed ? 'installed' : 'not installed'} {installedPrograms.ffmpeg.version ? `(${installedPrograms.ffmpeg.version})` : ''}</p>
+            <p><b>Python:</b> {installedPrograms.python.installed ? 'installed' : 'not installed'} {installedPrograms.python.version ? `(${installedPrograms.python.version})` : ''}</p>
-          <p><b>pytubefix:</b> {installedPrograms.pytubefix.installed ? 'installed' : 'not installed'} {installedPrograms.pytubefix.version ? `(${installedPrograms.pytubefix.version})` : ''}</p>
+            {installedPrograms.python.installed ? installedPrograms.python.version ? compareVersions(installedPrograms.python.version, '3.8') < 0 ? <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.winget.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {installer: 'winget', program: 'Python.Python.3.11'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
-          <p><b>pytubepp:</b> {installedPrograms.pytubepp.installed ? 'installed' : 'not installed'} {installedPrograms.pytubepp.version ? `(${installedPrograms.pytubepp.version})` : ''}</p>
+          </div>
+          <div className="programitem flex items-center justify-between">
+            <p><b>FFmpeg:</b> {installedPrograms.ffmpeg.installed ? 'installed' : 'not installed'} {installedPrograms.ffmpeg.version ? `(${installedPrograms.ffmpeg.version})` : ''}</p>
+            {installedPrograms.ffmpeg.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.winget.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {installer: 'winget', program: 'ffmpeg'})}}>install</Button> : null}
+          </div>
+          <div className="programitem flex items-center justify-between">
+            <p><b>PytubePP:</b> {installedPrograms.pytubepp.installed ? 'installed' : 'not installed'} {installedPrograms.pytubepp.version ? `(${installedPrograms.pytubepp.version})` : ''}</p>
+            {installedPrograms.pytubepp.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.pip.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {installer: 'pip', program: 'pytubepp'})}}>install</Button> : null}
+          </div>
+          {(!installedPrograms.winget.installed && (!installedPrograms.python.installed || !installedPrograms.ffmpeg.installed)) ?
+            <Alert className="mt-5" variant="destructive">
+              <CircleAlert className="h-5 w-5" />
+              <AlertTitle>WinGet Not Found</AlertTitle>
+              <AlertDescription>
+                WinGet is required to install necessary packages. Please install it manually from <a className="underline" href="https://learn.microsoft.com/en-us/windows/package-manager/winget/#install-winget" target="_blank">here</a>. 
+              </AlertDescription>
+            </Alert>
+          : null}
+          {(installedPrograms.python.installed && installedPrograms.ffmpeg.installed && installedPrograms.pytubepp.installed) ?
+            <Alert className="mt-5">
+              <CircleCheck className="h-5 w-5" />
+              <AlertTitle>Ready</AlertTitle>
+              <AlertDescription>
+                Everything looks ok! You can close this window now. Make sure it's always running in the background.
+              </AlertDescription>
+            </Alert>
+          : null}
         </div>
       </div>
     </ThemeProvider>

src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

src/lib/utils.ts

@@ -59,7 +59,10 @@ export function extract_version(output: string): string | null {
       /ffmpeg version (\d+\.\d+)/,      // Pattern for ffmpeg
       /Python (\d+\.\d+\.\d+)/,         // Pattern for Python
       /pytubefix (\d+\.\d+\.\d+)/,      // Pattern for pytubefix
-      /pytubepp (\d+\.\d+\.\d+)/        // Pattern for pytubepp
+      /pytubepp (\d+\.\d+\.\d+)/,       // Pattern for pytubepp
+      /v(\d+\.\d+\.\d+)/,               // Pattern for winget
+      /pip (\d+\.\d+)/,                 // Pattern for pip
+
   ];
   for (const pattern of versionPatterns) {
       const match = output.match(pattern);
@@ -94,4 +97,16 @@ export async function sendStreamInfo(url: string) {
   };
 
   fetchData();
-}
+}
+
+export function compareVersions (v1: string, v2: string) {
+  const parts1 = v1.split('.').map(Number);
+  const parts2 = v2.split('.').map(Number);
+  for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+    const part1 = parts1[i] || 0;
+    const part2 = parts2[i] || 0;
+    if (part1 > part2) return 1;
+    if (part1 < part2) return -1;
+  }
+  return 0;
+};

src/types.ts

@@ -1,16 +1,20 @@
 export interface InstalledPrograms {
+    winget: {
+        installed: boolean;
+        version: string | null;
+    };
     python: {
         installed: boolean;
         version: string | null;
     };
+    pip: {
+        installed: boolean;
+        version: string | null;
+    };
     ffmpeg: {
         installed: boolean;
         version: string | null;
     };
-    pytubefix: {
-        installed: boolean
-        version: string | null;
-    };
     pytubepp: {
         installed: boolean;
         version: string | null;