From 12300d43c5ff2534e13c7ce96a19e70dd405abb0 Mon Sep 17 00:00:00 2001 From: marcobaobao Date: Fri, 23 Jun 2023 11:58:11 +0200 Subject: [PATCH] copy url to clipboard, code refactoring --- frontend/src/assets/i18n.yaml | 8 ++++++ frontend/src/components/DownloadsCardView.tsx | 22 ++++++++++++---- frontend/src/components/DownloadsListView.tsx | 6 ++--- frontend/src/components/StackableResult.tsx | 25 +++++++++++-------- frontend/src/views/Home.tsx | 13 +++------- 5 files changed, 46 insertions(+), 28 deletions(-) diff --git a/frontend/src/assets/i18n.yaml b/frontend/src/assets/i18n.yaml index 0505946..66530bc 100644 --- a/frontend/src/assets/i18n.yaml +++ b/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 diff --git a/frontend/src/components/DownloadsCardView.tsx b/frontend/src/components/DownloadsCardView.tsx index 3e3bb8b..fde0134 100644 --- a/frontend/src/components/DownloadsCardView.tsx +++ b/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 ( { @@ -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) { )) } + setOpenSB(false)} + message={i18n.t('clipboardAction')} + /> ) } \ No newline at end of file diff --git a/frontend/src/components/DownloadsListView.tsx b/frontend/src/components/DownloadsListView.tsx index 88aa556..ae9e19e 100644 --- a/frontend/src/components/DownloadsListView.tsx +++ b/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 ( @@ -65,7 +65,7 @@ export function DownloadsListView({ downloads, abortFunction }: Props) { diff --git a/frontend/src/components/StackableResult.tsx b/frontend/src/components/StackableResult.tsx index b777dbc..b1d1b14 100644 --- a/frontend/src/components/StackableResult.tsx +++ b/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 ( - navigator.clipboard.writeText(url)}> + { + navigator.clipboard.writeText(url) + onCopy() + }}> {thumbnail !== '' ? {isCompleted ? "Clear" : "Stop"} diff --git a/frontend/src/views/Home.tsx b/frontend/src/views/Home.tsx index e2f5884..f4853a4 100644 --- a/frontend/src/views/Home.tsx +++ b/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 ( : - + : + }