copy url to clipboard, code refactoring

frontend/src/assets/i18n.yaml

@@ -31,6 +31,7 @@ languages:
     rpcConnErr: Error while conencting to RPC server
     splashText: No active downloads
     archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
   italian:
     urlInput: URL di YouTube o di qualsiasi altro servizio supportato
     statusTitle: Stato
@@ -61,6 +62,7 @@ languages:
     rpcConnErr: Error nella connessione al server RPC
     splashText: Nessun download attivo
     archiveTitle: Archivio
+    clipboardAction: URL copiato negli appunti
   chinese:
     urlInput: YouTube 或其他受支持服务的视频网址
     statusTitle: 状态
@@ -91,6 +93,7 @@ languages:
     rpcConnErr: Error while conencting to RPC server
     splashText: No active downloads
     archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -121,6 +124,7 @@ languages:
     rpcConnErr: Error al conectarse al servidor RPC
     splashText: No active downloads
     archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
   russian:
     urlInput: YouTube or other supported service video url
     statusTitle: Status
@@ -151,6 +155,7 @@ languages:
     rpcConnErr: Error while conencting to RPC server
     splashText: No active downloads
     archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -181,6 +186,7 @@ languages:
     rpcConnErr: Error while conencting to RPC server
     splashText: No active downloads
     archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -212,6 +218,7 @@ languages:
     rpcConnErr: Error while conencting to RPC server
     splashText: No active downloads
     archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -242,3 +249,4 @@ languages:
     rpcConnErr: Error en connectar-se al servidor RPC
     splashText: No active downloads
     archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard

frontend/src/components/DownloadsCardView.tsx

@@ -1,14 +1,19 @@
-import { Grid } from "@mui/material"
-import { Fragment } from "react"
+import { Grid, Snackbar } from "@mui/material"
+import { Fragment, useContext, useEffect, useState } from "react"
 import type { RPCResult } from "../types"
 import { StackableResult } from "./StackableResult"
+import { I18nContext } from "../providers/i18nProvider"
 
 type Props = {
   downloads: RPCResult[]
-  abortFunction: (id: string) => void
+  onStop: (id: string) => void
 }
 
-export function DownloadsCardView({ downloads, abortFunction }: Props) {
+export function DownloadsCardView({ downloads, onStop }: Props) {
+  const [openSB, setOpenSB] = useState(false)
+
+  const { i18n } = useContext(I18nContext)
+
   return (
     <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
       {
@@ -20,7 +25,8 @@ export function DownloadsCardView({ downloads, abortFunction }: Props) {
                 title={download.info.title}
                 thumbnail={download.info.thumbnail}
                 percentage={download.progress.percentage}
-                stopCallback={() => abortFunction(download.id)}
+                onStop={() => onStop(download.id)}
+                onCopy={() => setOpenSB(true)}
                 resolution={download.info.resolution ?? ''}
                 speed={download.progress.speed}
                 size={download.info.filesize_approx ?? 0}
@@ -29,6 +35,12 @@ export function DownloadsCardView({ downloads, abortFunction }: Props) {
           </Grid>
         ))
       }
+      <Snackbar
+        open={openSB}
+        autoHideDuration={1250}
+        onClose={() => setOpenSB(false)}
+        message={i18n.t('clipboardAction')}
+      />
     </Grid>
   )
 }

frontend/src/components/DownloadsListView.tsx

@@ -16,10 +16,10 @@ import type { RPCResult } from "../types"
 
 type Props = {
   downloads: RPCResult[]
-  abortFunction: Function
+  onStop: (id: string) => void
 }
 
-export function DownloadsListView({ downloads, abortFunction }: Props) {
+export function DownloadsListView({ downloads, onStop }: Props) {
   return (
     <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
       <Grid item xs={12}>
@@ -65,7 +65,7 @@ export function DownloadsListView({ downloads, abortFunction }: Props) {
                       <Button
                         variant="contained"
                         size="small"
-                        onClick={() => abortFunction(download.id)}
+                        onClick={() => onStop(download.id)}
                       >
                         {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
                       </Button>

frontend/src/components/StackableResult.tsx

@@ -16,14 +16,15 @@ import { useEffect, useState } from 'react'
 import { ellipsis, formatSpeedMiB, roundMiB } from '../utils'
 
 type Props = {
-  title: string,
-  url: string,
-  thumbnail: string,
+  title: string
+  url: string
+  thumbnail: string
   resolution: string
-  percentage: string,
-  size: number,
-  speed: number,
-  stopCallback: VoidFunction,
+  percentage: string
+  size: number
+  speed: number
+  onStop: () => void
+  onCopy: () => void
 }
 
 export function StackableResult({
@@ -34,7 +35,8 @@ export function StackableResult({
   percentage,
   speed,
   size,
-  stopCallback
+  onStop,
+  onCopy,
 }: Props) {
   const [isCompleted, setIsCompleted] = useState(false)
 
@@ -57,7 +59,10 @@ export function StackableResult({
 
   return (
     <Card>
-      <CardActionArea onClick={() => navigator.clipboard.writeText(url)}>
+      <CardActionArea onClick={() => {
+        navigator.clipboard.writeText(url)
+        onCopy()
+      }}>
         {thumbnail !== '' ?
           <CardMedia
             component="img"
@@ -99,7 +104,7 @@ export function StackableResult({
           variant="contained"
           size="small"
           color="primary"
-          onClick={stopCallback}
+          onClick={onStop}
         >
           {isCompleted ? "Clear" : "Stop"}
         </Button>

frontend/src/views/Home.tsx

@@ -9,8 +9,7 @@ import {
   Snackbar,
   SpeedDial,
   SpeedDialAction,
-  SpeedDialIcon,
-  styled
+  SpeedDialIcon
 } from '@mui/material'
 import { useContext, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -121,12 +120,6 @@ export default function Home() {
     client.killAll()
   }
 
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  })
-
   return (
     <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
       <Backdrop
@@ -140,8 +133,8 @@ export default function Home() {
       }
       {
         settings.listView ?
-          <DownloadsListView downloads={activeDownloads ?? []} abortFunction={abort} /> :
-          <DownloadsCardView downloads={activeDownloads ?? []} abortFunction={abort} />
+          <DownloadsListView downloads={activeDownloads ?? []} onStop={abort} /> :
+          <DownloadsCardView downloads={activeDownloads ?? []} onStop={abort} />
       }
       <Snackbar
         open={showToast === status.connected}