neosubhamoy/pytubepp-helper
1
1
Fork 0
mirror of https://github.com/neosubhamoy/pytubepp-helper.git synced 2026-02-04 11:22:22 +05:30
Code Releases Activity

(feat): added dynamic port config for msghost, new settings page and ui improvements

Browse Source
This commit is contained in:
Subhamoy Biswas
2025-02-05 20:15:19 +05:30
Verified
parent 279f651b1e
commit d8a191e408
24 changed files with 2236 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
src/App.tsx
View File

@@ -1,18 +1,15 @@
import clsx from "clsx";
import { useState, useEffect } from "react";
import "./index.css";
import React from "react"
import { useEffect } from "react";
import { invoke } from "@tauri-apps/api/tauri";
import { listen } from '@tauri-apps/api/event';
import { listen } from "@tauri-apps/api/event";
import { appWindow } from '@tauri-apps/api/window';
import { platform } from '@tauri-apps/api/os';
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 { compareVersions, extractVersion, isInstalled, sendStreamInfo, detectWindows, detectDistro, extractDistroId, detectMacOs, registerMacFiles, detectPackageManager, extractPkgMngrName } from "./lib/utils";
import { CircleCheck, TriangleAlert, CircleAlert } from 'lucide-react';
import { WebSocketMessage } from "@/types";
import { sendStreamInfo } from "@/lib/utils";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
function App() {
function App({ children }: { children: React.ReactNode }) {
useEffect(() => {
const handleCloseRequested = (event: any) => {
event.preventDefault();
@@ -22,59 +19,6 @@ function App() {
appWindow.onCloseRequested(handleCloseRequested);
}, []);
const [isWindows, setIsWindows] = useState<boolean>(false)
const [windowsVersion, setWindowsVersion] = useState<string | null>(null)
const [isMacOs, setIsMacOs] = useState<boolean>(false)
const [macOsVersion, setMacOsVersion] = useState<string | null>(null)
const [distroId, setDistroId] = useState<string | null>(null)
const [distroPkgMngr, setDistroPkgMngr] = useState<string | null>(null)
const [installedPrograms, setInstalledPrograms] = useState<InstalledPrograms>({
winget: {
installed: false,
version: null,
},
apt: {
installed: false,
version: null,
},
dnf: {
installed: false,
version: null,
},
brew: {
installed: false,
version: null,
},
python: {
installed: false,
version: null,
},
pip: {
installed: false,
version: null,
},
python3: {
installed: false,
version: null,
},
pip3: {
installed: false,
version: null,
},
ffmpeg: {
installed: false,
version: null,
},
nodejs: {
installed: false,
version: null,
},
pytubepp: {
installed: false,
version: null,
},
});
useEffect(() => {
const unlisten = listen<WebSocketMessage>('websocket-message', (event) => {
if(event.payload.command === 'send-stream-info') {
@@ -103,349 +47,12 @@ function App() {
};
}, []);
function checkAllPrograms() {
isInstalled('winget', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
winget: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('apt', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
apt: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('dnf', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
dnf: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('homebrew', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
brew: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('python', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
python: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('pip', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
pip: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('python3', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
python3: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('pip3', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
pip3: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('ffmpeg', '-version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
ffmpeg: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('nodejs', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
nodejs: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
isInstalled('pytubepp', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
pytubepp: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
});
}
useEffect(() => {
checkAllPrograms();
const runPlatformSpecificChecks = async () => {
const currentPlatform = await platform();
switch (currentPlatform) {
case 'win32':
const windowsResult = await detectWindows();
if (windowsResult) {
setIsWindows(true);
setWindowsVersion(extractVersion(windowsResult));
}
break;
case 'darwin':
const macResult = await detectMacOs();
if (macResult) {
setIsMacOs(true);
setMacOsVersion(extractVersion(macResult));
}
break;
case 'linux':
const distroResult = await detectDistro();
if (distroResult) {
setDistroId(extractDistroId(distroResult));
const distroPkgMngrResult = await detectPackageManager();
if (distroPkgMngrResult) {
setDistroPkgMngr(extractPkgMngrName(distroPkgMngrResult));
}
}
break;
default:
console.log('Unsupported platform');
}
};
runPlatformSpecificChecks().catch(console.error);
}, [])
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="container">
<div className={clsx("topbar flex justify-between items-center mt-5", !isWindows && "mx-3")}>
<h1 className="text-xl font-bold">PytubePP Helper</h1>
<div>
{ isMacOs && macOsVersion && compareVersions(macOsVersion, '10.13') > 0 ?
<Button size="sm" onClick={registerMacFiles}>Register</Button>
:
null
}
<Button className="ml-3" size="sm" onClick={checkAllPrograms}>Refresh</Button>
</div>
</div>
{ distroId && distroPkgMngr && distroPkgMngr === 'apt' ? /* Section for Debian */
<div className="programstats mt-5 mx-3">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python3.installed ? 'installed' : 'not installed'} {installedPrograms.python3.version ? `(${installedPrograms.python3.version})` : ''}</p>
{installedPrograms.python3.installed ? installedPrograms.python3.version ? compareVersions(installedPrograms.python3.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.apt.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install python3 -y'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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.apt.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install ffmpeg -y'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.apt.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install nodejs -y'})}}>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.pip3.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'pip3 install pytubepp --break-system-packages'})}}>install</Button> : null}
</div>
{(!installedPrograms.apt.installed && (!installedPrograms.python3.installed || !installedPrograms.ffmpeg.installed)) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>APT Not Found</AlertTitle>
<AlertDescription>
APT is required to install necessary debian packages. Please install it manually for your distro.
</AlertDescription>
</Alert>
: null}
{(!installedPrograms.pip3.installed && !installedPrograms.pytubepp.installed) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>PIP Not Found</AlertTitle>
<AlertDescription>
PIP is required to install necessary python packages. Please install it now to continue: <Button variant="link" className="text-blue-600 p-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install python3-pip -y'})}}>install</Button>
</AlertDescription>
</Alert>
: null}
{(installedPrograms.python3.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>
: distroId && distroPkgMngr && distroPkgMngr === 'dnf' ? /* Section for RHEL */
<div className="programstats mt-5 mx-3">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python3.installed ? 'installed' : 'not installed'} {installedPrograms.python3.version ? `(${installedPrograms.python3.version})` : ''}</p>
{installedPrograms.python3.installed ? installedPrograms.python3.version ? compareVersions(installedPrograms.python3.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.dnf.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install python3 -y'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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.dnf.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install ffmpeg -y'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.dnf.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install nodejs -y'})}}>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.pip3.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'pip3 install pytubepp'})}}>install</Button> : null}
</div>
{(!installedPrograms.dnf.installed && (!installedPrograms.python3.installed || !installedPrograms.ffmpeg.installed)) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>DNF Not Found</AlertTitle>
<AlertDescription>
DNF is required to install necessary rpm packages. Please install it manually for your distro.
</AlertDescription>
</Alert>
: null}
{(!installedPrograms.pip3.installed && !installedPrograms.pytubepp.installed) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>PIP Not Found</AlertTitle>
<AlertDescription>
PIP is required to install necessary python packages. Please install it now to continue: <Button variant="link" className="text-blue-600 p-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install python3-pip -y'})}}>install</Button>
</AlertDescription>
</Alert>
: null}
{(installedPrograms.python3.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>
: isWindows && windowsVersion && parseInt(windowsVersion) >= 17134 ? /* Section for Windows */
<div className="programstats mt-5">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python.installed ? 'installed' : 'not installed'} {installedPrograms.python.version ? `(${installedPrograms.python.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', {icommand: 'winget install Python.Python.3.12'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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', {icommand: 'winget install ffmpeg'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.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', {icommand: 'winget install OpenJS.NodeJS.LTS'})}}>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', {icommand: 'pip install 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>
: isMacOs && macOsVersion && compareVersions(macOsVersion, '10.13') > 0 ? /* Section for macOS */
<div className="programstats mt-5 mx-3">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python3.installed ? 'installed' : 'not installed'} {installedPrograms.python3.version ? `(${installedPrograms.python3.version})` : ''}</p>
{installedPrograms.python3.installed ? installedPrograms.python3.version ? compareVersions(installedPrograms.python3.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.brew.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install python'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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.brew.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install ffmpeg'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.brew.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install node'})}}>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.pip3.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'pip3 install pytubepp --break-system-packages'})}}>install</Button> : null}
</div>
{(!installedPrograms.brew.installed && (!installedPrograms.python3.installed || !installedPrograms.ffmpeg.installed)) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>Homebrew Not Found</AlertTitle>
<AlertDescription>
Homebrew is required to install necessary unix packages. Please install it manually for your mac.
</AlertDescription>
</Alert>
: null}
{(!installedPrograms.pip3.installed && !installedPrograms.pytubepp.installed) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>PIP Not Found</AlertTitle>
<AlertDescription>
PIP is required to install necessary python packages. Please install it now to continue: <Button variant="link" className="text-blue-600 p-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install python3-pip -y'})}}>install</Button>
</AlertDescription>
</Alert>
: null}
{(installedPrograms.python3.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 className="programstats mt-5 mx-3">
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>Unsupported OS</AlertTitle>
<AlertDescription>
Sorry, your os/distro is currently not supported. If you think this is just a mistake or you want to request us to add support for your os/distro you can create a github issue <a className="underline" href="https://github.com/neosubhamoy/pytubepp-helper/issues" target="_blank">here</a>.
</AlertDescription>
</Alert>
</div>
}
</div>
<TooltipProvider delayDuration={1000}>
{children}
<Toaster />
</TooltipProvider>
</ThemeProvider>
);
}

2
src/components/ui/button.tsx
View File

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {

176
src/components/ui/form.tsx Normal file
View File

@@ -0,0 +1,176 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
Controller,
ControllerProps,
FieldPath,
FieldValues,
FormProvider,
useFormContext,
} from "react-hook-form"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
const Form = FormProvider
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
name: TName
}
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState, formState } = useFormContext()
const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
const { id } = itemContext
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
type FormItemContextValue = {
id: string
}
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = React.useId()
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
)
})
FormItem.displayName = "FormItem"
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField()
return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
)
})
FormLabel.displayName = "FormLabel"
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
<Slot
ref={ref}
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
)
})
FormControl.displayName = "FormControl"
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField()
return (
<p
ref={ref}
id={formDescriptionId}
className={cn("text-[0.8rem] text-muted-foreground", className)}
{...props}
/>
)
})
FormDescription.displayName = "FormDescription"
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
if (!body) {
return null
}
return (
<p
ref={ref}
id={formMessageId}
className={cn("text-[0.8rem] font-medium text-destructive", className)}
{...props}
>
{body}
</p>
)
})
FormMessage.displayName = "FormMessage"
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}

22
src/components/ui/input.tsx Normal file
View File

@@ -0,0 +1,22 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }

24
src/components/ui/label.tsx Normal file
View File

@@ -0,0 +1,24 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }

126
src/components/ui/toast.tsx Normal file
View File

@@ -0,0 +1,126 @@
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { Cross2Icon } from "@radix-ui/react-icons"
const ToastProvider = ToastPrimitives.Provider
const ToastViewport = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Viewport>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className
)}
{...props}
/>
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
default: "border bg-background text-foreground",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
const Toast = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
return (
<ToastPrimitives.Root
ref={ref}
className={cn(toastVariants({ variant }), className)}
{...props}
/>
)
})
Toast.displayName = ToastPrimitives.Root.displayName
const ToastAction = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Action>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Action
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
className
)}
{...props}
/>
))
ToastAction.displayName = ToastPrimitives.Action.displayName
const ToastClose = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Close>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Close
ref={ref}
className={cn(
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
className
)}
toast-close=""
{...props}
>
<Cross2Icon className="h-4 w-4" />
</ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName
const ToastTitle = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Title>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Title
ref={ref}
className={cn("text-sm font-semibold [&+div]:text-xs", className)}
{...props}
/>
))
ToastTitle.displayName = ToastPrimitives.Title.displayName
const ToastDescription = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Description>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Description
ref={ref}
className={cn("text-sm opacity-90", className)}
{...props}
/>
))
ToastDescription.displayName = ToastPrimitives.Description.displayName
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
type ToastActionElement = React.ReactElement<typeof ToastAction>
export {
type ToastProps,
type ToastActionElement,
ToastProvider,
ToastViewport,
Toast,
ToastTitle,
ToastDescription,
ToastClose,
ToastAction,
}

33
src/components/ui/toaster.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { useToast } from "@/hooks/use-toast"
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@/components/ui/toast"
export function Toaster() {
const { toasts } = useToast()
return (
<ToastProvider>
{toasts.map(function ({ id, title, description, action, ...props }) {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
<ToastClose />
</Toast>
)
})}
<ToastViewport />
</ToastProvider>
)
}

30
src/components/ui/tooltip.tsx Normal file
View File

@@ -0,0 +1,30 @@
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "@/lib/utils"
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
</TooltipPrimitive.Portal>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

194
src/hooks/use-toast.ts Normal file
View File

@@ -0,0 +1,194 @@
"use client"
// Inspired by react-hot-toast library
import * as React from "react"
import type {
ToastActionElement,
ToastProps,
} from "@/components/ui/toast"
const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000
type ToasterToast = ToastProps & {
id: string
title?: React.ReactNode
description?: React.ReactNode
action?: ToastActionElement
}
const actionTypes = {
ADD_TOAST: "ADD_TOAST",
UPDATE_TOAST: "UPDATE_TOAST",
DISMISS_TOAST: "DISMISS_TOAST",
REMOVE_TOAST: "REMOVE_TOAST",
} as const
let count = 0
function genId() {
count = (count + 1) % Number.MAX_SAFE_INTEGER
return count.toString()
}
type ActionType = typeof actionTypes
type Action =
| {
type: ActionType["ADD_TOAST"]
toast: ToasterToast
}
| {
type: ActionType["UPDATE_TOAST"]
toast: Partial<ToasterToast>
}
| {
type: ActionType["DISMISS_TOAST"]
toastId?: ToasterToast["id"]
}
| {
type: ActionType["REMOVE_TOAST"]
toastId?: ToasterToast["id"]
}
interface State {
toasts: ToasterToast[]
}
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
const addToRemoveQueue = (toastId: string) => {
if (toastTimeouts.has(toastId)) {
return
}
const timeout = setTimeout(() => {
toastTimeouts.delete(toastId)
dispatch({
type: "REMOVE_TOAST",
toastId: toastId,
})
}, TOAST_REMOVE_DELAY)
toastTimeouts.set(toastId, timeout)
}
export const reducer = (state: State, action: Action): State => {
switch (action.type) {
case "ADD_TOAST":
return {
...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
}
case "UPDATE_TOAST":
return {
...state,
toasts: state.toasts.map((t) =>
t.id === action.toast.id ? { ...t, ...action.toast } : t
),
}
case "DISMISS_TOAST": {
const { toastId } = action
// ! Side effects ! - This could be extracted into a dismissToast() action,
// but I'll keep it here for simplicity
if (toastId) {
addToRemoveQueue(toastId)
} else {
state.toasts.forEach((toast) => {
addToRemoveQueue(toast.id)
})
}
return {
...state,
toasts: state.toasts.map((t) =>
t.id === toastId || toastId === undefined
? {
...t,
open: false,
}
: t
),
}
}
case "REMOVE_TOAST":
if (action.toastId === undefined) {
return {
...state,
toasts: [],
}
}
return {
...state,
toasts: state.toasts.filter((t) => t.id !== action.toastId),
}
}
}
const listeners: Array<(state: State) => void> = []
let memoryState: State = { toasts: [] }
function dispatch(action: Action) {
memoryState = reducer(memoryState, action)
listeners.forEach((listener) => {
listener(memoryState)
})
}
type Toast = Omit<ToasterToast, "id">
function toast({ ...props }: Toast) {
const id = genId()
const update = (props: ToasterToast) =>
dispatch({
type: "UPDATE_TOAST",
toast: { ...props, id },
})
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
dispatch({
type: "ADD_TOAST",
toast: {
...props,
id,
open: true,
onOpenChange: (open) => {
if (!open) dismiss()
},
},
})
return {
id: id,
dismiss,
update,
}
}
function useToast() {
const [state, setState] = React.useState<State>(memoryState)
React.useEffect(() => {
listeners.push(setState)
return () => {
const index = listeners.indexOf(setState)
if (index > -1) {
listeners.splice(index, 1)
}
}
}, [state])
return {
...state,
toast,
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
}
}
export { useToast, toast }

80
src/lib/platform-utils.ts Normal file
View File

@@ -0,0 +1,80 @@
import { platform } from "@tauri-apps/api/os";
import { detectDistro, detectMacOs, detectPackageManager, detectWindows, extractDistroId, extractPkgMngrName, extractVersion } from "@/lib/utils";
import { PlatformInfo } from "@/types";
export async function getPlatformInfo(): Promise<PlatformInfo> {
const defaultInfo: PlatformInfo = {
isWindows: false,
windowsVersion: null,
isMacOs: false,
macOsVersion: null,
distroId: null,
distroPkgMngr: null,
};
try {
const currentPlatform = await platform();
switch (currentPlatform) {
case 'win32': {
const windowsResult = await detectWindows();
if (windowsResult) {
return {
...defaultInfo,
isWindows: true,
windowsVersion: extractVersion(windowsResult),
};
}
break;
}
case 'darwin': {
const macResult = await detectMacOs();
if (macResult) {
return {
...defaultInfo,
isMacOs: true,
macOsVersion: extractVersion(macResult),
};
}
break;
}
case 'linux': {
const distroResult = await detectDistro();
if (distroResult) {
const distroPkgMngrResult = await detectPackageManager();
return {
...defaultInfo,
distroId: extractDistroId(distroResult),
distroPkgMngr: distroPkgMngrResult ? extractPkgMngrName(distroPkgMngrResult) : null,
};
}
break;
}
default:
console.log('Unsupported platform');
}
} catch (error) {
console.error('Error detecting platform:', error);
}
return defaultInfo;
}
// Individual getters for specific platforms
export async function isWindowsPlatform(): Promise<{ isWindows: boolean; version: string | null }> {
const info = await getPlatformInfo();
return { isWindows: info.isWindows, version: info.windowsVersion };
}
export async function isMacOsPlatform(): Promise<{ isMacOs: boolean; version: string | null }> {
const info = await getPlatformInfo();
return { isMacOs: info.isMacOs, version: info.macOsVersion };
}
export async function getLinuxInfo(): Promise<{ distroId: string | null; packageManager: string | null }> {
const info = await getPlatformInfo();
return { distroId: info.distroId, packageManager: info.distroPkgMngr };
}

2
src/lib/utils.ts
View File

@@ -180,7 +180,9 @@ export async function registerMacFiles() {
console.log(`File ${file.source} copied successfully to ${destinationPath}`);
}
}
return { success: true, message: 'Registered successfully' }
} catch (error) {
console.error('Error copying files:', error);
return { success: false, message: 'Failed to register' }
}
}

17
src/main.tsx
View File

@@ -1,9 +1,20 @@
import React from "react";
import "@/index.css";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "@/App";
import HomePage from "@/pages/home";
import SettingsPage from "@/pages/settings";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
<App>
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/settings" element={<SettingsPage />} />
</Routes>
</BrowserRouter>
</App>
</React.StrictMode>,
);

441
src/pages/home.tsx Normal file
View File

@@ -0,0 +1,441 @@
import clsx from "clsx";
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/tauri";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { InstalledPrograms } from "@/types";
import { compareVersions, extractVersion, isInstalled, registerMacFiles } from "@/lib/utils";
import { CircleCheck, TriangleAlert, CircleAlert, Settings, RefreshCcw, Loader2, PackagePlus } from "lucide-react";
import { getPlatformInfo } from "@/lib/platform-utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useToast } from "@/hooks/use-toast";
export default function HomePage() {
const { toast } = useToast();
const [isLoading, setIsLoading] = useState(true);
const [isWindows, setIsWindows] = useState<boolean>(false)
const [windowsVersion, setWindowsVersion] = useState<string | null>(null)
const [isMacOs, setIsMacOs] = useState<boolean>(false)
const [macOsVersion, setMacOsVersion] = useState<string | null>(null)
const [distroId, setDistroId] = useState<string | null>(null)
const [distroPkgMngr, setDistroPkgMngr] = useState<string | null>(null)
const [installedPrograms, setInstalledPrograms] = useState<InstalledPrograms>({
winget: {
installed: false,
version: null,
},
apt: {
installed: false,
version: null,
},
dnf: {
installed: false,
version: null,
},
brew: {
installed: false,
version: null,
},
python: {
installed: false,
version: null,
},
pip: {
installed: false,
version: null,
},
python3: {
installed: false,
version: null,
},
pip3: {
installed: false,
version: null,
},
ffmpeg: {
installed: false,
version: null,
},
nodejs: {
installed: false,
version: null,
},
pytubepp: {
installed: false,
version: null,
},
});
function checkAllPrograms() {
return Promise.all([
isInstalled('winget', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
winget: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('apt', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
apt: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('dnf', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
dnf: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('homebrew', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
brew: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('python', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
python: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('pip', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
pip: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('python3', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
python3: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('pip3', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
pip3: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('ffmpeg', '-version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
ffmpeg: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('nodejs', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
nodejs: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
}),
isInstalled('pytubepp', '--version').then((result) => {
setInstalledPrograms((prevState) => ({
...prevState,
pytubepp: {
installed: result.installed,
version: result.output ? extractVersion(result.output) : null,
}
}));
})
]);
}
const fetchPlatformInfo = async () => {
const info = await getPlatformInfo();
setIsWindows(info.isWindows);
setWindowsVersion(info.windowsVersion);
setIsMacOs(info.isMacOs);
setMacOsVersion(info.macOsVersion);
setDistroId(info.distroId);
setDistroPkgMngr(info.distroPkgMngr);
};
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await Promise.all([
checkAllPrograms(),
fetchPlatformInfo()
]);
} catch (error) {
console.error(error);
} finally {
setIsLoading(false);
}
};
init();
}, []);
return (
<div className="container">
<div className={clsx("topbar flex justify-between items-center mt-5", !isWindows && "mx-3")}>
<h1 className="text-xl font-bold">PytubePP Helper</h1>
<div className="flex items-center">
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" asChild>
<Link to="/settings">
<Settings className="w-5 h-5"/>
</Link>
</Button>
</TooltipTrigger>
<TooltipContent><p>settings</p></TooltipContent>
</Tooltip>
{ isMacOs && macOsVersion && compareVersions(macOsVersion, '10.13') > 0 ?
<Tooltip>
<TooltipTrigger>
<Button className="ml-3" size="icon" onClick={async () => {
const result = await registerMacFiles();
toast({ title: result.message, variant: result.success ? 'default' : 'destructive' });
}}>
<PackagePlus className="w-5 h-5"/>
</Button>
</TooltipTrigger>
<TooltipContent><p>register to mac</p></TooltipContent>
</Tooltip>
:
null
}
<Tooltip>
<TooltipTrigger>
<Button className="ml-3" size="icon" disabled={isLoading} onClick={checkAllPrograms}>
<RefreshCcw className="w-5 h-5"/>
</Button>
</TooltipTrigger>
<TooltipContent><p>refresh</p></TooltipContent>
</Tooltip>
</div>
</div>
{ isLoading ?
<div className="mt-5 mx-3">
<div className="flex flex-col">
<div className="flex items-center justify-center py-[4.3rem]">
<div className="flex flex-col items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin"/>
<p className="ml-3 mt-2 text-muted-foreground">checking...</p>
</div>
</div>
</div>
</div>
: distroId && distroPkgMngr && distroPkgMngr === 'apt' ? /* Section for Debian */
<div className="programstats mt-5 mx-3">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python3.installed ? 'installed' : 'not installed'} {installedPrograms.python3.version ? `(${installedPrograms.python3.version})` : ''}</p>
{installedPrograms.python3.installed ? installedPrograms.python3.version ? compareVersions(installedPrograms.python3.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.apt.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install python3 -y'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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.apt.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install ffmpeg -y'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.apt.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install nodejs -y'})}}>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.pip3.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'pip3 install pytubepp --break-system-packages'})}}>install</Button> : null}
</div>
{(!installedPrograms.apt.installed && (!installedPrograms.python3.installed || !installedPrograms.ffmpeg.installed)) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>APT Not Found</AlertTitle>
<AlertDescription>
APT is required to install necessary debian packages. Please install it manually for your distro.
</AlertDescription>
</Alert>
: null}
{(!installedPrograms.pip3.installed && !installedPrograms.pytubepp.installed) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>PIP Not Found</AlertTitle>
<AlertDescription>
PIP is required to install necessary python packages. Please install it now to continue: <Button variant="link" className="text-blue-600 p-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo apt install python3-pip -y'})}}>install</Button>
</AlertDescription>
</Alert>
: null}
{(installedPrograms.python3.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>
: distroId && distroPkgMngr && distroPkgMngr === 'dnf' ? /* Section for RHEL */
<div className="programstats mt-5 mx-3">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python3.installed ? 'installed' : 'not installed'} {installedPrograms.python3.version ? `(${installedPrograms.python3.version})` : ''}</p>
{installedPrograms.python3.installed ? installedPrograms.python3.version ? compareVersions(installedPrograms.python3.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.dnf.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install python3 -y'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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.dnf.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install ffmpeg -y'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.dnf.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install nodejs -y'})}}>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.pip3.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'pip3 install pytubepp'})}}>install</Button> : null}
</div>
{(!installedPrograms.dnf.installed && (!installedPrograms.python3.installed || !installedPrograms.ffmpeg.installed)) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>DNF Not Found</AlertTitle>
<AlertDescription>
DNF is required to install necessary rpm packages. Please install it manually for your distro.
</AlertDescription>
</Alert>
: null}
{(!installedPrograms.pip3.installed && !installedPrograms.pytubepp.installed) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>PIP Not Found</AlertTitle>
<AlertDescription>
PIP is required to install necessary python packages. Please install it now to continue: <Button variant="link" className="text-blue-600 p-0" onClick={async () => { await invoke('install_program', {icommand: 'sudo dnf install python3-pip -y'})}}>install</Button>
</AlertDescription>
</Alert>
: null}
{(installedPrograms.python3.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>
: isWindows && windowsVersion && parseInt(windowsVersion) >= 17134 ? /* Section for Windows */
<div className="programstats mt-5">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python.installed ? 'installed' : 'not installed'} {installedPrograms.python.version ? `(${installedPrograms.python.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', {icommand: 'winget install Python.Python.3.12'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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', {icommand: 'winget install ffmpeg'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.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', {icommand: 'winget install OpenJS.NodeJS.LTS'})}}>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', {icommand: 'pip install 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>
: isMacOs && macOsVersion && compareVersions(macOsVersion, '10.13') > 0 ? /* Section for macOS */
<div className="programstats mt-5 mx-3">
<div className="programitem flex items-center justify-between">
<p><b>Python:</b> {installedPrograms.python3.installed ? 'installed' : 'not installed'} {installedPrograms.python3.version ? `(${installedPrograms.python3.version})` : ''}</p>
{installedPrograms.python3.installed ? installedPrograms.python3.version ? compareVersions(installedPrograms.python3.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.brew.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install python'})}}>install</Button> : <TriangleAlert className="w-5 h-5 my-2 text-orange-400"/> : null}
</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.brew.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install ffmpeg'})}}>install</Button> : null}
</div>
<div className="programitem flex items-center justify-between">
<p><b>Node.js:</b> {installedPrograms.nodejs.installed ? 'installed' : 'not installed'} {installedPrograms.nodejs.version ? `(${installedPrograms.nodejs.version})` : ''}</p>
{installedPrograms.nodejs.installed ? <CircleCheck className="w-5 h-5 my-2 text-green-400"/> : installedPrograms.brew.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install node'})}}>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.pip3.installed ? <Button variant="link" className="text-blue-600 px-0" onClick={async () => { await invoke('install_program', {icommand: 'pip3 install pytubepp --break-system-packages'})}}>install</Button> : null}
</div>
{(!installedPrograms.brew.installed && (!installedPrograms.python3.installed || !installedPrograms.ffmpeg.installed)) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>Homebrew Not Found</AlertTitle>
<AlertDescription>
Homebrew is required to install necessary unix packages. Please install it manually for your mac.
</AlertDescription>
</Alert>
: null}
{(!installedPrograms.pip3.installed && !installedPrograms.pytubepp.installed) ?
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>PIP Not Found</AlertTitle>
<AlertDescription>
PIP is required to install necessary python packages. Please install it now to continue: <Button variant="link" className="text-blue-600 p-0" onClick={async () => { await invoke('install_program', {icommand: 'brew install python3-pip -y'})}}>install</Button>
</AlertDescription>
</Alert>
: null}
{(installedPrograms.python3.installed && installedPrograms.ffmpeg.installed && installedPrograms.nodejs.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 className="programstats mt-5 mx-3">
<Alert className="mt-5" variant="destructive">
<CircleAlert className="h-5 w-5" />
<AlertTitle>Unsupported OS</AlertTitle>
<AlertDescription>
Sorry, your os/distro is currently not supported. If you think this is just a mistake or you want to request us to add support for your os/distro you can create a github issue <a className="underline" href="https://github.com/neosubhamoy/pytubepp-helper/issues" target="_blank">here</a>.
</AlertDescription>
</Alert>
</div>
}
</div>
);
}

183
src/pages/settings.tsx Normal file
View File

@@ -0,0 +1,183 @@
import clsx from "clsx";
import { z } from "zod";
import { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/tauri";
import { Button } from "@/components/ui/button";
import { ArrowLeft, History, Save } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Config, PlatformInfo } from "@/types";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useToast } from "@/hooks/use-toast";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { getPlatformInfo } from "@/lib/platform-utils";
const DEFAULT_PORT = 3030;
const settingsFormSchema = z.object({
port: z.number().min(3000, { message: "Port must be greater than 3000" }).max(3999, { message: "Port must be less than 3999" }),
})
export default function SettingsPage() {
const { toast } = useToast();
const [platformInfo, setPlatformInfo] = useState<PlatformInfo | null>(null);
const [appConfig, setAppConfig] = useState<Config | null>(null);
const [isFormDirty, setIsFormDirty] = useState(false);
const saveButtonRef = useRef<HTMLButtonElement>(null);
const settingsForm = useForm<z.infer<typeof settingsFormSchema>>({
resolver: zodResolver(settingsFormSchema),
defaultValues: {
port: DEFAULT_PORT,
},
});
useEffect(() => {
const subscription = settingsForm.watch((value) => {
if (appConfig) {
setIsFormDirty(value.port !== appConfig.port);
}
});
return () => subscription.unsubscribe();
}, [settingsForm, appConfig]);
useEffect(() => {
const getConfig = async () => {
const config: Config = await invoke("get_config");
if (config) {
setAppConfig(config);
settingsForm.reset({ port: config.port });
}
}
getConfig().catch(console.error);
}, [settingsForm]);
useEffect(() => {
getPlatformInfo().then(setPlatformInfo).catch(console.error);
}, [])
const updateConfig = async () => {
try {
const updatedConfig: Config = await invoke("update_config", {
newConfig: {
port: Number(settingsForm.getValues().port)
}
});
setAppConfig(updatedConfig);
setIsFormDirty(false);
toast({
title: "Settings updated"
});
} catch (error) {
console.error("Failed to update config:", error);
toast({
title: "Failed to update settings",
variant: "destructive"
});
}
}
const resetConfig = async () => {
try {
const config: Config = await invoke("reset_config");
setAppConfig(config);
settingsForm.reset({ port: config.port });
setIsFormDirty(false);
toast({
title: "Using default settings"
});
} catch (error) {
console.error("Failed to reset config:", error);
toast({
title: "Failed to reset settings",
variant: "destructive"
});
}
}
const isUsingDefaultConfig = appConfig?.port === DEFAULT_PORT;
return (
<div className="container">
<div className={clsx("topbar flex justify-between items-center mt-5", !platformInfo?.isWindows && "mx-3")}>
<div className="flex items-center">
<Link to="/">
<ArrowLeft className="w-5 h-5 mr-3"/>
</Link>
<h1 className="text-xl font-bold">Settings</h1>
</div>
<div className="flex items-center">
<Tooltip>
<TooltipTrigger>
<Button
className="ml-3"
variant="outline"
size="icon"
onClick={() => resetConfig()}
disabled={isUsingDefaultConfig}
>
<History className="w-5 h-5"/>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{isUsingDefaultConfig ? "using default settings" : "reset to default"}</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button
className="ml-3"
size="icon"
onClick={() => saveButtonRef.current?.click()}
disabled={!isFormDirty}
>
<Save className="w-5 h-5"/>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{isFormDirty ? "save changes" : "no changes to save"}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
<div className={clsx("mt-5", !platformInfo?.isWindows && "mx-3")}>
<div className="flex flex-col">
<Form {...settingsForm}>
<form onSubmit={settingsForm.handleSubmit(updateConfig)}>
<FormField
control={settingsForm.control}
name="port"
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
<FormControl>
<Input
type="text"
{...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value ? Number(value) : DEFAULT_PORT);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}}
/>
</FormControl>
<FormDescription>
The port to use for the websocket server
</FormDescription>
<FormMessage/>
</FormItem>
)}
/>
<Button className="hidden" ref={saveButtonRef} type="submit">Save</Button>
</form>
</Form>
</div>
</div>
</div>
);
}

13
src/types.ts
View File

@@ -1,3 +1,16 @@
export interface Config {
port: number;
}
export interface PlatformInfo {
isWindows: boolean;
windowsVersion: string | null;
isMacOs: boolean;
macOsVersion: string | null;
distroId: string | null;
distroPkgMngr: string | null;
}
export interface InstalledPrograms {
winget: {
installed: boolean;