ready for 3.2.1

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-dlp-webui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
     "dev": "vite",

frontend/src/atoms/status.ts

@@ -3,6 +3,7 @@ import { of } from 'fp-ts/lib/Task'
 import { getOrElse } from 'fp-ts/lib/TaskEither'
 import { atom, selector } from 'recoil'
 import { ffetch } from '../lib/httpClient'
+import { RPCVersion } from '../types'
 import { rpcClientState } from './rpc'
 import { serverURL } from './settings'
 
@@ -29,12 +30,15 @@ export const availableDownloadPathsState = selector({
   }
 })
 
-export const ytdlpVersionState = selector<string>({
-  key: 'ytdlpVersionState',
+export const ytdlpRpcVersionState = selector<RPCVersion>({
+  key: 'ytdlpRpcVersionState',
   get: async ({ get }) => await pipe(
-    ffetch<string>(`${get(serverURL)}/api/v1/version`),
+    ffetch<RPCVersion>(`${get(serverURL)}/api/v1/version`),
     getOrElse(() => pipe(
-      'unknown version',
+      {
+        rpcVersion: 'unknown version',
+        ytdlpVersion: 'unknown version',
+      },
       of
     )),
   )()

frontend/src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import DownloadIcon from '@mui/icons-material/Download'
 import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
-import { AppBar, Chip, Divider, Toolbar } from '@mui/material'
+import { AppBar, CircularProgress, Divider, Toolbar } from '@mui/material'
 import { Suspense } from 'react'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from '../atoms/settings'
@@ -34,13 +34,9 @@ const Footer: React.FC = () => {
         fontSize: 14,
         display: 'flex', gap: 1, justifyContent: 'space-between'
       }}>
-        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-          {/* TODO: make it dynamic */}
-          <Chip label="RPC v3.2.0" variant="outlined" size="small" />
-          <Suspense>
-            <VersionIndicator />
-          </Suspense>
-        </div>
+        <Suspense fallback={<CircularProgress size={15} />}>
+          <VersionIndicator />
+        </Suspense>
         <div style={{ display: 'flex', gap: 4, 'alignItems': 'center' }}>
           <div style={{
             display: 'flex',

frontend/src/components/VersionIndicator.tsx

@@ -1,14 +1,15 @@
-import { Chip, CircularProgress } from '@mui/material'
+import { Chip } from '@mui/material'
 import { useRecoilValue } from 'recoil'
-import { ytdlpVersionState } from '../atoms/status'
+import { ytdlpRpcVersionState } from '../atoms/status'
 
 const VersionIndicator: React.FC = () => {
-  const version = useRecoilValue(ytdlpVersionState)
+  const version = useRecoilValue(ytdlpRpcVersionState)
 
   return (
-    version
-      ? <Chip label={`yt-dlp v${version}`} variant="outlined" size="small" />
-      : <CircularProgress size={15} />
+    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+      <Chip label={`RPC v${version.rpcVersion}`} variant="outlined" size="small" />
+      <Chip label={`yt-dlp v${version.ytdlpVersion}`} variant="outlined" size="small" />
+    </div>
   )
 }
 

frontend/src/types/index.ts

@@ -115,4 +115,9 @@ export type LiveStreamProgress = Record<string, {
   status: LiveStreamStatus
   waitTime: string
   liveDate: string
-}>
+}>
+
+export type RPCVersion = {
+  rpcVersion: string
+  ytdlpVersion: string
+}