diff --git a/frontend/src/components/UpdateBinaryButton.tsx b/frontend/src/components/UpdateBinaryButton.tsx
new file mode 100644
index 00000000..fa0bede2
--- /dev/null
+++ b/frontend/src/components/UpdateBinaryButton.tsx
@@ -0,0 +1,33 @@
+import { Button, CircularProgress } from '@mui/material'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { useState } from 'react'
+import { useToast } from '../hooks/toast'
+
+const UpdateBinaryButton: React.FC = () => {
+ const { i18n } = useI18n()
+ const { client } = useRPC()
+ const { pushMessage } = useToast()
+
+ const [isLoading, setIsLoading] = useState(false)
+
+ const updateBinary = () => {
+ setIsLoading(true)
+ client
+ .updateExecutable()
+ .then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
+ .then(() => setIsLoading(false))
+ }
+
+ return (
+ : <>>}
+ onClick={updateBinary}
+ >
+ {i18n.t('updateBinButton')}
+
+ )
+}
+
+export default UpdateBinaryButton
\ No newline at end of file
diff --git a/frontend/src/lib/rpcClient.ts b/frontend/src/lib/rpcClient.ts
index a5d00dc4..188e40b7 100644
--- a/frontend/src/lib/rpcClient.ts
+++ b/frontend/src/lib/rpcClient.ts
@@ -191,4 +191,11 @@ export class RPCClient {
params: []
})
}
+
+ public updateExecutable() {
+ return this.sendHTTP({
+ method: 'Service.UpdateExecutable',
+ params: []
+ })
+ }
}
\ No newline at end of file
diff --git a/frontend/src/views/Settings.tsx b/frontend/src/views/Settings.tsx
index 28cabf35..03d1b819 100644
--- a/frontend/src/views/Settings.tsx
+++ b/frontend/src/views/Settings.tsx
@@ -1,5 +1,4 @@
import {
- Button,
Checkbox,
Container,
FormControl,
@@ -18,6 +17,7 @@ import {
Typography,
capitalize
} from '@mui/material'
+import { useAtom } from 'jotai'
import { Suspense, useEffect, useMemo, useState } from 'react'
import {
Subject,
@@ -44,11 +44,10 @@ import {
themeState
} from '../atoms/settings'
import CookiesTextField from '../components/CookiesTextField'
+import UpdateBinaryButton from '../components/UpdateBinaryButton'
import { useToast } from '../hooks/toast'
import { useI18n } from '../hooks/useI18n'
-import { useRPC } from '../hooks/useRPC'
import { validateDomain, validateIP } from '../utils'
-import { useAtom } from 'jotai'
// NEED ABSOLUTELY TO BE SPLIT IN MULTIPLE COMPONENTS
export default function Settings() {
@@ -72,7 +71,6 @@ export default function Settings() {
const [invalidIP, setInvalidIP] = useState(false)
const { i18n } = useI18n()
- const { client } = useRPC()
const { pushMessage } = useToast()
@@ -140,13 +138,6 @@ export default function Settings() {
setTheme(event.target.value as Theme)
}
- /**
- * Updates yt-dlp binary via RPC
- */
- const updateBinary = () => {
- client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
- }
-
return (
-
-
+
+